Cara Membuat Syntax Highlighter Di Bloggger : 100% WORK - Jejakdzgn

Cara Membuat Syntax Highlighter Di Bloggger : 100% WORK

Jejakdzgn.my.id - Pada kesempatan kali ini, saya akan memberikan sebuah tutorial cara membuat syntax highlighter di blog.


Namun, sebelum kita masuk ke tutorialnya. Saya ingin memberikan sebuah penjelasan mengenai syntax highlighter pada anda semua.

Pengertian Syntax Highlighter

Syntax Highlighter adalah fitur teks editor yang menampilkan sebuah source kode, yang dimana jika kita menggunakan syntax Highlighter ini, maka source kode tersebut dapat memperpendek agar tampilannya tidak terlalu panjang.

Pada umumnya syntax highlighter ini ditemukan pada blog yang membahas seputar tutorial seperti jejakdzgn, selain itu syntay highlighter ini dapat membuat huruf berwarna warni.

Tentunya penggunaan syntax highlighter ini sangat penting, untuk itulah bagi anda yang memiliki web atau blog yang membahas seputar tutorial pemrograman, harus menggunakan syntax highlighter agar para pengunjung nyaman dan dapat melihat keseluruhan source kode tersebut.

Jika anda ingin membuatnya, anda bisa mengikuti langkah-langkah dibawah ini.

cara membuat syntax highlighter di blog

Langkah 1 : masuk ke akun blogger.

Langkah 2 : masuk ke menu TEMA >> Edit HTML.

Langkah 3 : silahkan copy kode dibawah ini, lalu pastekan kode tersebut tepat DIATAS kode ]]></b:skin>.

/* CSS Syntax Highlighter */

pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}

pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}

pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}

pre:after{display:inline-block;content:"f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}

pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}

code .token.important {font-weight:bold;}

code .token.entity {cursor:help;}

pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}

pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,

pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

Langkah 4 : Simpan.

Untuk menggunakan nya di dalam postingan blog, maka kalian hanya tambahkan kode saja, cara nya adalah dibawah ini.

Langkah 1 : masuk ke akun blogger.

Langkah 2 : buat postingan di blog anda.

Langkah 3 : ubah compose menjadi HTML.

Langkah 4 : silahkan copy kode dibawah ini, lalu pastekan kode tersebut kedalam HTML.

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kodeanda di sini......</code></pre>

PENTING : Untuk mengganti Title CSS menjadi HTML, Kalian hanya ubah CSSku Menjadi HTMLku lalu kalian ubah juga Title CSS Menjadi HTML.

Untuk menaruh kode HTML nya, Kalian hanya mengganti tulisan kode anda di sini......  dengan Kode kalian, tetapi sebelum menaruh kode HTML nya kedalam kotak kode HTML, kalian harus parse kode kalian terlebih dahulu agar kode yang kalian taruh ke dalam kotak kode HTML tersebut berhasil.

Langkah 5 : Publikasikan.

Akhir Kata :

Itu tutorial cara membuat syntax highlighter di blog, jika anda masih bingung 
Show Comments
Hide Comments

1 Komentar untuk "Cara Membuat Syntax Highlighter Di Bloggger : 100% WORK"

  1. Keren mas syntax highlighternya, ternata mudah juga yah masangnya. Dulu saya gak mau repot jadi embed dari Github aja biar tampilan kodenya keren :)

    BalasHapus
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel