Cara Menambahkan Syntax Highlighter pada Blogger Blog

Untuk menambahkan atau menuliskan postingan yang berisikan kode, tentu saja tidak mudah. Bagi yang menggunakan blog wordpress, hal ini sagat mudah dilakukan. Karena tinggal menambahkan plugin Syntax Highlighter. Nah bagaimana jika kita menggunakan blogger blog ?

Ternyata juga tidak terlalu sulit. Mau tau caranya ? Saya akan membantu teman-teman untuk mewujudkannya, 🙂 Penulisan kode apa saja yang bisa dilakukan dengan Syntax Highligter ?Diantaranya adalah : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. Sangat banyak bukan ?

Adapun langkah-langkahnya adalah sebagai berikut :

1. Login dan Klik "Layout" > "Edit HTML" dan klik “Expand Widget Templates”.

2. Klik situs http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, kemudian copy semua kode yang ada.

3. Paste code css tersebut sebelum tag berikut ]]--></b:skin>

4. Kemudian copykan kode berikut ini sebelum tag </head> :

<!– Add-in CSS for syntax highlighting –>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js’ type=’text/javascript’></script>

5. Langkah terakhir adalah memasukkan kode dibawah ini sebelum tag </body> :

<!– Add-in Script for syntax highlighting –>
<script language=’javascript’>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

6. Untuk menuliskannya kedalam blog, gunakan format seperti dibawah ini :

<pre name="code" class="html">
….ketikkan kode yang anda inginkan disini….!
</pre>

Untuk menuliskan kode tertentu, silahkan ubah tulisan yang berwarna merah (html) dengan jenis kode yang ingin dituliskan, seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Sebagai contoh hasilnya bisa dilihat pada blog ini Syntax Highlighter Kode.