Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Syntax Highlighter di Blog (Blogger)

Bagi blogger yang membahas tutorial berisi kodingan di blognya, syntax highlighter ini sangat penting. Sebab, adanya syntak highlighter ini dapat dengan jelas membedakan sekaligus memisahkan bagian teks biasa dengan bagian kodingan.

Di samping itu, kodingan yang ditampilkan di postingan akan lebih enak dilihat. Jadi ada perbedaan variasi warna, ada nomor baris kodenya. Ya mirip-mirip di software teks editor seperti Notepad++. Lalu, gimana sih cara membuat syntax highlighter ini? Simak tutorial AneIqbal berikut ini yang sudah dipasang di sini.

cara membuat syntax highlighter di blog


Langkah-langkah cara membuat syntax highlighter di blog

  1. Masuk ke Blogger.com > menu Template > lalu klik tombol Edit HTML
  2. Buat jaga-jaga, backup dulu templatenya. Nggak juga nggak masalah karena kita cuma menambahkan beberapa baris kode, nggak ngoprek-ngoprek banget
  3. Cari kode ]]></b:skin>.. Supaya lebih cepat, tekan Ctrl + F lalu ketik kode tersebut di kotak pencarian
  4. Copy dan paste-kan kode di bawah ini tepat di bawah ]]></b:skin>.. Lalu klik Simpan Template.

<link href='https://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;https://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Kalo sudah ditambahkan, maka akan terlihat seperti berikut.

Cara Memasang Syntax Highlighter Blog di Blogger

Syntax highlighter sudah ditambahkan, lalu cara penggunaanya bagaimana?

Sebelum masuk ke pembahasan cara penggunaannya, tidak ada salahnya untuk mengecek panduan cara membuat statistik pengunjung di website, membuat related post di blogspot, dan cara membuat favicon blogger.


Cara menggunakan syntax highlighter

Biasanya kalo kita ingin memasukkan kode di postingan, kita menggunakan kode/tag:

<pre>kodenya di sini</pre>

Menggunakan syntax highlighter juga sama, bedanya ada penambahan atribut class, contoh:

<pre class="brush:html">
kodenya di sini
</pre>

Kode di atas akan meng-highlight jenis kode yang disebutkan di brush. Jenis kode yang disupport highlight adalah CSS, HTML, Javascript, PHP, SQL, dan Python (brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python).

Yang perlu diingat: kode yang ingin ditampilkan di postingan, harus diparser terlebih dahulu agar dapat tampil, bukan dibaca sebagai perintah. Perhatikan gambar berikut.

Cara Memasang Syntax Highlighter Blog di Blogger

Gambar di atas menunjukkan cara menggunakan syntax highlighter di postingan. Kode yang ingin ditampilkan di postingan sudah di parser terlebih dulu. Hasilnya kode akan tampil bagus di postingan.

syntax highlighter blogger

Salah satu tool parser online yang bisa Anda gunakan https://www.freeformatter.com/html-escape.html. Tools tersebut dapat digunakan dengan bebas dan gratis.

Kami masih punya beberapa rekomendasi panduan blog yang mungkin sedang Anda butuhkan. Berikut di antaranya; jump break bloggermembuat tombol share di blog, dan cara membuat recent post. Demikian pembahasan cara membuat highlighter ini dan semoga Anda berhasil memasangnya juga.

5 komentar untuk "Cara Membuat Syntax Highlighter di Blog (Blogger)"

Silakan berkomentar dengan kalimat yang bijak.