Cara Memasang Syntax Highlighter Blog di Blogger

Bagi blogger yang membahas tutorial berisi kodingan di blognya, syntax highlighter ini sangat penting.

..karena dengan adanya syntax highlighter, 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 pasangnya? Simak tutorial berikut ini.

syntax highlighter blogger

Langkah-langkahnya memasang syntax highlighter

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

Kalo sudah ditambahkan, maka akan terlihat seperti berikut.

syntax highlighter blog

Syntax highlighter sudah ditambahkan, lalu cara penggunaanya gimana? Ini dia.

Baca juga ya..
Cara Menambahkan Tombol Share di Bawah Postingan (Khusus Blogger)
Tutorial HTML untuk Pemula: Hal yang Harus Diketahui Sebelum Belajar HTML
Cara Mudah Membuat Widget Recent Post Sidebar di Blogspot

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.

syntax highlighter 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 blog

..salah satu tool parser online: http://www.freeformatter.com/html-escape.html.

Demikian, semoga bermanfaat.


0 Komentar untuk "Cara Memasang Syntax Highlighter Blog di Blogger"