Cara Pasang Syntax Highlighter Keren di Blog

 

Cara Pasang Syntax Highlighter Keren di Blog - Syntax Highlighter adalah fitur dari beberapa teks editor yang digunakan untuk menampilkan teks atau biasanya source code, ditampilkan dalam bentuk berbagai warna untuk memudahkan user untuk membaca codenya.   

Khususnya bagi anda yang mempunyai blog atau website yang sering membagikan source code program, Syntax Highlighter memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server. 

Baca juga : Cara Membuat Infinite Scroll Post di Blog

Kode untuk Syntax Highlighter yang akan kita gunakan kali ini dibuat oleh alexgorbatchev dengan menggunakan jQuery dan CSS, alexgorbatechv menyediakan banyak jenis library bahasa pemrograman yang tersedia seperti C Family, PHP, Java, Javascript, Python, Ruby Dan lain - lain. 

Untuk mengimplementasikannya di blogger langkah - langkahnya adalah sebagai berikut :

1. Klik Template > Klik Edit HTML
2. Cari kode </head> ( untuk lebih cepat anda dapat menekan CTRL + F )
3. Letakan baris kode ini di atas </head> tadi

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

4. Klik Simpan.

Perhatikan pada baris code :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

ini adalah template Syntax Highlighter anda anda dapat menggantinya dengan tema yang berbeda cek di sini untuk pilihan tema yang tersedia : THEME

Perhatikan pada baris code :

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 

Ini adalah jenis brush code yang anda gunakan, jika anda hanya menggunakan beberapa bahasa saja, lebih baik gunakan yang diperlukan saja agar tidak berat. Sebagai contoh saya hanya menggunakan Brush PHP saja meskipun terdapat banyak jenis bahasa pemrograman yang saya pakai, hal ini agar membuat loading blog menjadi tidak berat. hal ini juga tidak akan berdampak besar pada Syntax Highlighter anda, efeknya hanya jika kata yang tidak ada pada library PHP tidak akan berwarna - warni.
 
Sekarang bagai mana cara menggunakannya ? jika anda ingin meletakan di postingan klik terlebih dahulu tombol HTML yang ada di atas untuk edit HTML postingan kemudian gunakan kode berikut : 

<pre class="brush:php">
....Letakan source code yang sudah di parse anda di sini....
</pre>

Ganti brushnya jika ingin menggunakan bahasa program lain.
 
Pemasangan Syntax Highlighter Keren di Blog anda sekarang sudah selesai, baca juga tutorial blogger lainnya.