Memasang Syntax Highlighter di Blogger

Tutorial kali ini saya akan membahas tentang Cara Memasang Syntax Highlighter di Blogger. Memasang Syntax Highlighter di Blogger menurut saya penting bagi blog-blog yang menyajikan tutorial-tutorial yang berkaitan dengan programing supaya tampilan artikel lebih menarik. Syntax Highlighter sudah cukup dikenal di berbagai platform dari Wordpress, Apache, Mozilla, Yahoo, Aptana, dan masih banyak lagi. Para blogger biasanya menggunakan blockquote sebagai wadah untuk menampilkan kode/script yang akan dibagikan kepada pembaca dan menandai dengan berbagai warna sebagai indikator atau pentunjuk. Dengan Syntax Highlighter ada upaya untuk menampilkan kode/script tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode. Misalnya, javascript, PHP, CSS, Python, dan masih banyak lagi. Syntax Highlighter merupakan ide dari Alex Gorbachev

Saya akan membagikan cara memasang Sytax Highlighter versi standarnya, karena diversi standar akan memiliki beberapa pilihan saat mouse diarahkan ke atas script yang akan muncul di pojok kanan atas frame script. Adapun pilihannya ada View Source, Copy to clipboard, Print, dan Help. Pilihan tersebut akan memudahkan kita dalam melihat kode dalam bentuk dan susunan aslinya, memudahkan kita untuk meng-copy kode, serta memudahkan untuk mencetak kode tersebut. Masing-masing kode akan diterjemahkan oleh script yang disebut brush.

Dibeberapa platform seperti Wordpress, Joomla, Drupal, pemasangan Syntax Highlighter tergolong sangat mudah, hanya perlu menambahkan berbagai jenis modul atau plugin syntax highlighter. Tetapi kalau di blogger, kita harus menambahkannya secara manual. Dan berikut step by step cara memasang Syntax Highlighter:

1. Login ke Blogger -> Template -> Edit HTML
2. Cari kode ]]></b:skin>
3. Copy script berikut tepat di bawah kode ]]></b:skin>. Sekaligus sebagai demo, saya akan menyajikan scriptnya ke dalam Syntax Highlihter, silahkan arahkan mouse ke script dan lihat di pojok kanan atas.
   
   

   <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> 
   

4. Simpan Template

Masing-masing script brush di atas berfungsi untuk memberi style dan menerjemahkan berbagai jenis script/kode seperti HTML, PHP, Python, CSS, VB, C#, C++, XML, Java, Ruby dan masih banyak lagi. Jika hanya memerlukan beberapa untuk highlighting script, silahkan hapus yang tidak diperlukan.

Cara Menggunakan Syntax Highlighter di dalam Post/Artikel Blog

Untuk post di blogger kita akan menggunakan tag <pre> dalam menampilkan kode/script. Kemudian masing-masing brush yang dibutuhkan akan dipanggil menggunakan atribut class di dalam tag <pre>. Contoh Penulisannya:

<pre class="brush:css, brush:html, brush:js, brush:php">
Kode Di Sini
</pre>

Pada contoh diatas, kode/script yang di highlight adalah gabungan antara CSS, HTML, JS, dan PHP. Jika anda hanya membutuhkan beberapa saja, maka gunakan brush sesuai script yang akan ditampilkan saja. Misalnya saya hanya akan menampikkan script CSS, maka yang dibutuhkan adalah:

<pre class="brush:css">
Kode Di Sini
</pre>

Menggunakan brush yang diperlukan saja akan menghemat waktu load dan menghindari load script yang tidak perlu.

Berikut cara implemetasinya kedalam post/artikel blog

1. Ketika akan memasukkan kode, pindah dari mode Compose ke mode HTML
2. Kemudian masukan tag <pre> dan class yang dibutuhkan sesuai dengan  jenis kode/script yang akan ditampilkan
3. Sebelum memasukkan kode diantara tag <pre>, ada baiknya kode tersebut diparse dulu untuk menghindari diterjemahkannya kode tersebut sebagai perintah bukan teks biasa. Silahkan parse kodenya menggunakan HTML/Script Parse. Contoh yang benar:

<pre class="brush:js"> &lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=App-ID&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));
//]]&gt;
&lt;/script&gt;
</pre>

Berikut hasilnya:

<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Catatan: script akan diload paling akhir oleh browser setelah semua script dan element diload. Jadi Syntax Highlighter akan muncul belakangan.

Begitulah Cara Memasang dan Implementasi Syntax Highlighter di Blogger dengan benar. Silahkan mencoba :D