Syntax highlighting untuk Blogger

Kadang kita perlu menempelkan kode HTML atau kode lainnya di tutorial blog kita. Namun sayang template blogger belum mendukung pembuatan code block. Jadi kita harus menambahkan secara manual style untuk code block. Untuk membuatnya, kita bisa menambahkan Syntax Highlighter untuk membuat tampilan code block seperti text editor. berikut langkah-langkahnya:

1. Installasi ke blogger
Pertama, copy code di bawah ini. lalu buka Setting > Template > Edit Template. Paste kan code di atas tag </head> yang ada di template.

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>

<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css"/>

<!-- Paste the brushes here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

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

2. Setting Sintax Hightlighter
Setelah itu kita melakukan setting sebelum melakukan save.

• Jika kalian ingin mengubah temanya, silahkan ganti sintax shThemeDefault.css dengan tema yang anda inginkan.
• Untuk melihat tema yang tersedia, silahkan lihat di sini. Dan untuk mengubah versi sesuai keinginan, silahkan ganti sintax /current/ dengan versi yang anda inginkan. Contohnya, ubah menjadi /3.0.83/ . Kalian bisa melihat semua versinya di sini.
• Untuk menambahkan sintax yang ingin di tampilkan, silahkan paste kan sesusai contoh di bawah comment "Paste the brushes here".  klik di sini untuk lihat semua brushes yang di support.
• Silahkan anda melihat Configuration String untuk settingan selanjutnya.

3. Cara Pakai

Untuk menggunakannya, kita harus menggunakan tag <pre> dan ganti html sesuai sintax apa yang anda gunakan. Gunakan tool HTML Decode/Encode sebelum memposting. Contohnya copy sintax di bawah ini:

    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }

Dan ini hasilnya seperti:

    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }