Integrasi SyntaxHighlighter Pada Blogspot

Seperti yang sudah saya tulis pada posting yang lalu, bahwa Anda bisa menggunakan SyntaxHighlighter untuk menampilkan source code Anda dengan ganteng pada Blogspot. Caranya sangat mudah untuk dilakukan. Tapi, sebelum itu Anda perlu melakukan integrasi SyntaxHighlighter pada blog Anda.

Oh, iya. Sebelum melakukan modifikasi, Anda sangat disarankan untuk melakukan backup terhadap your current layout atau layout Anda sekarang. Untuk jaga-jaga alias backup.

Langkah-langkahnya:

• Buka Dashboard Anda. Klik Layout, kemudian klik Edit HTML. Cari tag </body>. Copy dan paste-kan listing di bawah ini, di sebelum </body>

<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/shBrushCSharp.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/shBrushJava.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/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.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>

• Simpan template yang sudah ditambahkan listing kode. Jika tidak ada pesan error, artinya integrasi telah berhasil.

• Saat Anda ingin membuat posting yang memuat source code, pilih tab Edit Html. Letakkan source code Anda di antara tag berikut (dengan menggunakan html-escaped character, tentunya).

<pre class="brush: cpp">
# LETAKKAN KODE ANDA DI SINI #
</pre>

• Ganti cpp dengan bahasa pemrograman yang Anda inginkan. Beberapa bahasa yang didukung SyntaxHighlighter: C++ (cpp, c, c++), C# (c#, c-sharp, csharp), CSS (css), Delphi (delphi, pascal), Java (java), Java Script (js, jscript, javascript), PHP (php), Python (py, python), Ruby (rb, ruby, rails, ror), Sql (sql), VB (vb, vb.net), dan XML/HTML (xml, html, xhtml, xslt).