Cara membuat Syntax Highlighter alex gorbatchev Keren Abis

Syntax Higlighter adalah fitur dari beberapa teks editor yang digunakan untuk menampilkan teks editior yang digunakan untuk menampilkan teks atau basanya source code , ditampilkan dalam bentuk berbagai warna untuk memudahkan user untuk membaca kodenya.


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

kode untuk Syntax Higligther yang akan kita gunakan kali ini di buat oleh alexgorbatchev.com dengan menggunakan jQuery dan CSS , alexgorbatechc menyediakan banyak jenis libary bahasa pemograman yang tersedia seperti C Family , PHP, Java, Java script , 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 berikut ini diatas </head>

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

4. Ok Simpan tema / Save

Perhatikan pada baris kode berikut ini :

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

Ini adalah Template Syntax Highlighter anda dapat menggantinya dengan tema yang berbeda cek disini untuk pilihan tema yang tersedia --->THEME SYNTAX Perhatikan pada baris kode :

<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 brus code yang anda gunakan, jika anda hanya menggunakan beberapa jenis bahasa saja, labih baik gunakan yang diperlukan saja agar tidak berat untuk loading blog anda. Sebagai contoh saya hanya mengguunakan Brush PHP saja meskipun terdapat banyak jenis bahasa pemograman yang saya pakai , hal ini sekali lagi saya jelaskan agar membuat loading blog anda menjadi tidak berat, hal ini juga tidak akan berdampak besar pada Syntax Highlighter anda efeknya hanay jika kata yang tidak ada pada libary PHP tidak akan berwarna warni.

Sekarang bagaimana cara menggunakannya ? jika anda ingin meletakan di postingan klik terlebih dahulu tombol HTML yang ada diatas untuk Edit HTML postingan kemudian gunakan kode berikut ini :

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

Ganti Brushnya jika ingin menggunakan bahasa program lain. Ok pemasangan Syntax Highlighter keren di blog anda sekarang sudah selesai , semoga artikel ini bermanfaat Amin..oh yah sumber jintoples.blogspot.co.id

Share this post