Cara Menambahkan Syntax Highlighter pada Blogspot

Bagi yang menggunakan blog wordpress, jika ingin menambahkan Syntax Highlighter sagat mudah dilakukan. Karena tinggal menambahkan plugin Syntax Highlighter. Tetapi bagaimana bagi pengguna blogspot ? Ternyata juga tidak terlalu sulit untuk diterapkan. 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.

Tweet