Syntax Highlighter Mempercantik Tampilan Kode pada Postingan

Syntax higlighter adalah sebuah fitur untuk menampilkan text atau kode dengan variasi warna dan jenis tulisan yang berbeda. Syntax higlighter mampu berjalan di semua browser karena dikembangkan dengan javascript. Syntax highlighter mendukung banyak bahasa pemrograman seperti css, php, js, vb, c++ dan lain-lain. berikut contoh syntax higlighter bahasa php:

<?php 
  echo "This is example of Syntax Higlighter" //comment
?>

Memasang Syntax Higlighter pada Web atau Blog

Anda bisa download terlebih dahulu source code lengkap di situs alexgorbatchev.com. Agar syntax highlighter dapat berjalan di web atau blog anda, anda harus melakukan beberapa langkah:

1. Tambahkan  shCore.js and shCore.css di halaman web anda
2. Tambahkan brush yang anda inginkan misalnya: shBrushJScript.js untuk JavaScript, shBrushVb.js untuk Visual Basic.
3. Include-kan file shCore.css dan shThemeDefault.css
4. Tuliskan kode di antara script <pre> dan </pre>. 
5. Panggil SyntaxHighlighter.all() dengan Javascript
   

Bila anda belum mengerti metode diatas, anda bisa langsung mengarahkan link ke situs syntaxhighlighter tanpa harus mendownloadnya. Untuk pemilik blog ikuti langkah berikut:

1. Login ke situs blogger.com
2. Masuk ke Rancangan, kemudian pilih Edit Html.
3. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di bawah kode tadi.
   

   <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
   <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
   <script language='javascript'> SyntaxHighlighter.all();</script>
   

   
   Script pertama kedua, ketiga, dan sembilan adalah script yang wajib diisi, untuk yang ketiga dan seterusnya sesuai dengan jenis kode yang akan anda tampilkan misalnya shBrushJScript.js untuk JavaScript, shBrushVb.js untuk Visual Basic. Jika anda hanya mememerlukan php dan javascript sebaiknya anda menghapus link yang lainnya karena semakin banyak link akan memengaruhi kecepatan loading web anda.
   
4. Sekarang anda tinggal meletakkan kode postingan diantara kode berikut:
   

   <pre class="brush: css">
       letakkan kode di sini
   </pre>
   

   
   Jika jenis kode yang anda tampilkan bertipe php atau javascript anda tinggal mengganti kode brush: css menjadi brush: php atau brush: js. Selengkapnya tentang jenis kode lihat di sini.

Selamat mencoba!