Penggunaan Syntax Highlighter di Blogger

Untuk mempercantik tampilan dan juga kerapian di blog, BalonCoding perlu menambahkan fungsi syntax highlighter yang berfungsi melakukan format terhadap baris coding. Blogger atau blogspot yang BalCod gunakan sudah mendukung format syntax sesuai yang bahasa coding yang umum, seperti C++, C#, VB, XML, Java, JavaScript, Delphi.

Secara garis besar yang perlu kita lakukan hanya ada 4 langkah, yakni :

1. tambah coding css sebelum tag </b:skin>
2. tambah coding javascript sebelum tag </head>
3. tambah coding javascript sebelum tag </body>
4. terapkan tag <pre name="code" class="sql"> ke baris yang hendak kita format

Jadi mari kita mulai caranya :

1. Masuk ke menu Template dan klik tombol Edit HTML
2. Cari tulisan "</b:skin>"
3. Ambil semua coding css di http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
4. Masukkan coding css itu sebelum tulisan "</b:skin>"
5. Masukkan coding berikut ini sebelum tag </head>
   
   catatan : Untuk mempercepat loading, boleh hilangkan baris yang tidak perlu, misalnya tidak menggunakan Delphi atau Ruby


6. Masukkan coding berikut ini sebelum tag </body>

   <script language="javascript">
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>
   

   
   catatan : Sebaiknya, di tahap ini, klik tombol "Preview" untuk memastikan template yang kita edit tidak ada kesalahan


7. Semua tahap edit untuk melekatkan fungsi syntax highlighter sudah selesai, saatnya testing dengan menggunakan contoh seperti berikut,

   <pre name="code" class="css">
   /*coding di sini*/
   </pre>
   

Selesai, semoga bermanfaat ^_^