Integrasi SyntaxHighlighter pada Blogger

SyntaxHighlighter buatan Alex Ghorbatchev ini sangat cantik dan manis seperti artis yang berpakaian minimalis, sexy dan menggairahkan (halah... nembak keyword doang). Pada versi 2.0.320 ini banyak mengalami perbaikan dari pada versi sebelumnya. Saat pertama kali menggunakan SyntaxHighlighter versi (lupa lagi), Blogger TuneUp banyak mengalami kegagalan. Bukannya bagus malah jadi kacau, tag-tag yang seharusnya tidak tampil justru tampil, bahkan tag-tag yang tadinya tidak ada menjadi ada dan ikut tampil.

Pada awalnya SyntaxHighlighter menggunakan tag <textarea> tetapi sekarang menggunakan tag <pre> sebagai kontainer kode. Tag <pre> itu lebih baik karena kode yang ada diantara tag <pre> akan ditampilkan apa adanya tanpa terpengaruh tag lain. Setting parameter pada versi ini lebih banyak dari pada versi sebelumnya sehingga SyntaxHighlighter semakin fleksibel, lengkap, cepat proses loadingnya dan lebih bagus tampilannya. SyntaxHighlighter cocok bagi mereka para blogger hack, programmer, webdesigner, yang ingin menampilkan source code-nya didalam artikel.

Dibawah ini langkah demi langkah integrasi dan konfigurasi SyntaxHighlighter untuk pengguna Blogger.

Integrasi SyntaxHighlighter pada Blogger:

Langkah 1
Dowload css, script dan komponen SyntaxHighlighter lainnya disini.
Langkah 2
Ekstrak menggunakan software sekelas 7-Zip.
Langkah 3

Login ke webhosting anda dan upload file-file SyntaxHighlighter tadi. Jangan lupa copy shortcut URL file tersebut.

Langkah 4
Login ke Blogger dengan Account anda, jangan account saya.
Langkah 5
Masuk ke tab "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan kode dibawah ini diatas kode pada Langkah 6, dan ganti URL sesuai dengan shortcut URL file SyntaxHighlighter yang sudah anda upload pada webhosting anda:

<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js'/>
<link type='text/css' rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css'/>

Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan kode dibawah ini diatas kode pada Langkah 8:

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
...
SyntaxHighlighter.all();
</script>

Langkah 10
Simpan Template, sampai disini proses integrasi SyntaxHighlighter pada blogger sudah selesai.

Keterangan:
Perhatikan Langkah 7 diatas, pilihlah JavaScript Library yang sesuai dengan kebutuhan sourcecode yang akan ditampilkan pada artikel anda, tidak perlu semua dimasukan.

• shCore.js; ini adalah inti dari JavaScript Library SyntaxHighlighter, file ini wajib disertakan.
• shLegacy.js; ini adalah tambahan dari JavaScript Library SyntaxHighlighter
• shBrushBash.js; ini untuk menampilkan sourcecode bahasa pemrograman Bash
• shBrushCpp.js; ini untuk menampilkan sourcecode bahasa pemrograman C-PP
• shBrushCSharp.js; ini untuk menampilkan sourcecode bahasa pemrograman C-Sharp
• shBrushCss.js; ini untuk menampilkan sourcecode Cascading Style Sheet (CSS)
• shBrushDelphi.js; ini untuk menampilkan sourcecode bahasa pemrograman Delphi
• shBrushDiff.js; ini untuk menampilkan sourcecode Diff
• shBrushGroovy.js; ini untuk menampilkan sourcecode Groovy
• shBrushJava.js; ini untuk menampilkan sourcecode bahasa pemrograman Java
• shBrushJScript.js; ini untuk menampilkan sourcecode JavaScript
• shBrushPerl.js; ini untuk menampilkan sourcecode bahasa pemrograman Perl
• shBrushPhp.js; ini untuk menampilkan sourcecode bahasa web sideserver PHP
• shBrushPlain.js; ini untuk menampilkan sourcecode Plain Text
• shBrushPython.js; ini untuk menampilkan sourcecode bahasa pemrograman Python
• shBrushRuby.js; ini untuk menampilkan sourcecode Ruby
• shBrushScala.js; ini untuk menampilkan sourcecode Scala
• shBrushSql.js; ini untuk menampilkan sourcecode database SQL
• shBrushVb.js; ini untuk menampilkan sourcecode bahasa pemrograman Visual Basic
• shBrushXml.js; ini untuk menampilkan sourcecode XML
• shBrushJavaFX.js; ini untuk menampilkan sourcecode JavaFX
• shBrushPowerShell.js; ini untuk menampilkan sourcecode PowerShell

Perhatikan Langkah 9 diatas, bagian ini digunakan untuk mengkonfigurasi SyntaxHighlighter, baca artikel "Konfigurasi SyntaxHighlighter pada Blogger".

Memasukan kode SyntaxHighlighter pada artikel:

Langkah 1
Buat sebuah artikel pada mode "Edit HTML"
Langkah 2
Contoh penggunaan SyntaxHighlighter didalam artikel

<pre class="brush: js;">
function onThemeChange(sender)
{
 var parts = sender.value.split('|');
 document.getElementById("theme").href = "Styles/" + parts[1];
 document.body.style.backgroundColor = parts[0];
}
</pre>

Keterangan:

• Untuk memasukan kode SyntaxHighlighter harus dalam mode "Edit HTML"
• Sourcecode yang akan dimasukan kedalam kontainer SyntaxHighlighter ditempatkan diantara tag <pre>
• Lebih lanjut baca "Konfigurasi SyntaxHighlighter pada Blogger"

Mudah-mudahan berhasil... Tinggalkan pesan jika mengalami kegagalan, dan baca artikle selanjutnya mengenai "Konfigurasi SyntaxHighlighter pada Blogger". Happy Blogging... :-)