Cara Memasang Syntax Highlighter di Blog



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>
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 :
Sintaks 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-bshlang-clang-cclang-cpp,lang-cslang-cshlang-cyclang-cvlang-htmlang-htmllang-javalang-jslang-mlang-mxmllang-perllang-pl,lang-pmlang-pylang-rblang-shlang-xhtmllang-xmllang-xsl.


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, Salam Leaf-Coder! :)


Posting Komentar

1 Komentar