Cara Instalasi Syntax Highlighter pada Blogspot

Sobat SRU, ini adalah pertama dan ingin membahas bagaimana agar Syntax atau kode program yang ditampilkan pada blog atau website terlihat lebih menarik. Karena kita belajar bahasa pemrograman, akan banyak menghadapi Syntax supaya Sobat SRU tidak bosan dalam menghadapi kode program. Supaya syntax tampil menarik, kita menggunakan Syntax Highlighter yang dibuat oleh Alex Gorbatchev (Thanks for this script). Sebelum kita membahas lebih jauh tentang Syntax Highlighter, ada baiknya kita mengenal lebih dekat dengan Syntax Highlighter. Syntax Highlighter adalah suatu media dalam bentuk text area didalamnya kita dapat memasukan kode program terdiri dari bahasa Java, HTML, JScript, PHP, CSS, dan kode lainnya agar lebih mudah pembacaannya maka dilengkapi dengan warna. Fungsinya adalah untuk memudahkan programmer membaca ataupun menyalin kode yang ditulis oleh admin ke dalam post artikel.

Syntax Highligter sudah dikenal oleh berbagai platform misalnya Yahoo, Mozilla, Apache, Wordpress dan lain sebagainya. Kita sering menggunakan kode program di dalam pengembangan blog atau web dan sering berbagi diantara para blogger. Dan kebanyakan dari kita banyak sering menggunakan <blockquote> sebagai "kutipan" dari script atau kode tersebut dan memberikan tanda dan warna khusus sebagai indikator dari program sebagai petunjuknya. Alex Gorbachev menggunakan Brush sebagai kode penerjemah penerjemahnya sehingga kita bisa terapkan pada kode program untuk menampilkan highlight dari kode program yang berbeda.

Cara Instalasi Syntax Highlighter 

1. Login menggunakan account google pada blogspot
2. Buka dashboard > template > edit HTML
3. Gunakan Ctrl + F untuk melakukan pencarian b:skin selanjutnya tekan enter, dan tempatkan script  dibawah b:skin seperti contoh dibawah ini:

Berikut ini adalah script Syntaxt Highlighternya

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;; 
SyntaxHighlighter.all(); 
</script>

4. Selanjutnya save tempate.

Cara Menggunakan Syntax Highlighter pada Post  

Setelah mengcopy kode diatas, kita akan menampilkan diposting caranya adalah setelah menulis kode, masuk ke dalam mode HTML. Kita akan menggunakan tag <pre> kemudian masukan artribut class brush
dan type dari kodenya.

Contoh Penulisannya sebagai berikut:

<pre class= "brush:html,brush:css, brush:js, brush:python, brush:php, brush:sql">
Masukan Kode disini </pre>

Untuk melihat kode-kode yang dapat dipakai bisa dengan membaca disini
Untuk mengganti Tema atau tampilan Syntax Highlighter bisa dengan membaca disini 
Demikian tutorial ini semoga bermanfaat.