Mungkin beberapa dari Anda muncul pertanyaan apa itu Syntax Highlighter? yang pasti itu bukan nama panganan :P. Syntax Highlighter adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilka text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya enak dipandang mata ^^. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com?

Di jagat maya saat ini ada banyak jenis Syntax Highlighter untuk web/blog yang dapat kita pakai secara gratis tentunya, tinggal kita pilih mana yang sesuai dan cocok (menurut selera sih sebenarnya). Berikut ini beberapa contoh Syntax Highlighter yang bertebaran di Internet :

Kali ini saya akan membahas cara memasang syntax highlighter menggunakan Google Code Prettify. Ok.. to the point, pertama login dulu ke Dashbord Blogger Anda. Kemudian pilih Layout > Edit HTML. Setelah muncul halaman Edit HTML nya, klik tanda centang pada Expand Widget Templates

Sekarang pada code Templatenya, kita cari (pakai Find, CTRL+F) : 
</head>
Kalau sudah ketemu, copy-paste script ini dan taruh tepat di atas : </head> tadi. 
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

jadi kira-kira penempatan script di atas akan seperti ini: 

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
</head>
Setelah itu kita tambahkan script loadernya pada body, caranya cari kode ini: 
<body>
ganti dengan kode di bawah ini: 
<body onload="prettyPrint();">

Siippp.. setelah itu simpan, klik tombol SAVE TEMPLATE.

Cara Penulisan Source Code:

Ok.. setelah tadi kita pasang script Syntax Highlighter-nya, sekarang kita menuju ke cara pemakaiannya. Untuk membuat source code pada postingan kita agar diidentifikasi sebagai source code caranya ialah :
Sintak umumnya : 

<pre class="prettyprint lang-html">
 source code disini...
</pre>

Sebelum menulisan source code kita awali dengan tag HTML ini: <pre class="prettyprint lang-language">. Untuk mendefinisikan bahasa program yang ingin dipakai, kita atur pada lang-language, sesuaikan dengan bahasa dari source code yang ingin kita posting, misalnya lang-html untuk source code berupa HTML. Kemudian diakhiri dengan tag: </pre>. Contohnya sebagai berikut : 

<pre class="prettyprint lang-html">
<html>
<head>
<title>Test</title>
</head>
<body>
 Hellow world!!! Ini adalah contoh source code HTML.
</body>
</html>
</pre>
Selain opsi bahasa lang-html, ada pula opsi untuk bahasa lain sebagai berikut: lang-bsh, lang-c, lang-cc, lang-cpp, lang-cs, lang-csh, lang-cyc, lang-cv, lang-htm, lang-html, lang-java, lang-js, lang-m, lang-mxml, lang-perl, lang-pl, lang-pm, lang-py, lang-rb, lang-sh, lang-xhtml, lang-xml, lang-xsl.

Test Drive

Bagaimana? sulit? sepertinya mudah bukan? hehehe.. Untuk mencoba hasilnya, kita buat postingan dengan menyertakan source code (sembarang aja), kita beralih ke menu New Post > pilih mode Edit HTML. Tambahkan kode ini pada postingan : 
<pre class="prettyprint lang-html">
<html>
<head>
<title>Test</title>
</head>
<body>
 Hellow world!!! Ini adalah contoh source code HTML.
</body>
</html>
</pre>

Publish Post dan lihat hasilnya. Pada postingan itu saya menambahkan source code dengan bahasa HTML. Untuk preview hasilnya Anda bisa lihat pada postingan ini, coba Anda perhatikan kode-kode yang saya posting, ada warna-warna dan font khusus bukan? itulah Syntax Highlighter, tepatnya saya gunakan Google Code Prettify. Untuk cara memasang Syntax Highlighter versi lain, nanti akan saya share tutorialnya lagi.

Selamat mencoba :)

Kategori : ,
Share |