Syntax Highlighter for Blogger

Syntax Highlighter adalah suatu fitur text editor untuk meng-highlight dalam berbagai warna source code bahasa pemrograman tertentu agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Syntax Highlighter biasa digunakan di kebanyakan blog ternama untuk meng-highlight kode script yang biasa digunakan pada postingan artikel yang berisi tutorial. Syntax Highlighter akan sangat membantu pengunjung blog agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya enak dipandang mata. Di internet ada banyak jenis Syntax Highlighter, namun pada kesempatan kali ini saya hanya akan membahas Syntax Highlighter yang sering digunakan oleh blog-blog terkenal, yaitu Syntax Highlighter hasil kreasi Alex Gorbatchev.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di atas kode </Head> tersebut.
  <!--SYNTAX HIGHLIGHTER BEGINS-->
  <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/shBrushCpp.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/shBrushXml.js" type="text/javascript"></script>
  <script language="javascript">
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
  SyntaxHighlighter.all();
  </script>
  <!--SYNTAX HIGHLIGHTER ENDS-->


• Klik "Save" untuk menyimpan template...

Cara Penggunaan :

Pada postingan artikel cukup menambahkan kode <pre class="brush: js">...script / css...</pre> pada mode "Edit HTML" untuk mengaktifkan Syntax Highlighter di postingan artikel, sebagai contoh penggunaan seperti penulisan kode di bawah ini.

<pre class="brush: js">
<script type="text/javascript">
function (kodeScript){var testTextSyntax = "Syntax Highlighter";}
</script>
</pre>

Bentuk hasil Syntax Highlighter akan terlihat seperti di bawah ini.

Gimana sob... kerenkan infonya... oh yaa by the way busway anyway hasil diatas menggunakan tema warna default dari Syntax Highlighter supaya lebih lengkap infonya saya juga akan berikan tambahan info untuk tema warna Syntax Highlighter biar makin komplit artikelnya...

Pilihan Tema Syntax Highlighter :

Silakan sobat pilih beberapa tema Syntax Highlighter di bawah ini supaya sesuai dengan tema template blog yang sobat gunakan. Pemasangan tema Syntax Highlighter ini cukup mudah cukup ganti kode script di atas (yang dipasang di template), seperti pada kode di bawah ini.

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

Kemudian ganti dengan kode tema berikut ini.

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


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


• Fade to Grey Theme
  
  
  
  
  <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>


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


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


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

Klik "Save" untuk menyimpan template... kemudian apabila postingan artikel sobat sudah menggunakan Syntax Highlighter silakan sobat lihat hasilnya pada postingan artikel tersebut.

.: Semoga Bermanfaat :.