Cara memasang plugin Prettify Syntax Highlighter pada blog

Plugin Syntax highlighter berfungsi untuk menampilkan potongan code bahasa pemrograman yang kita tempel pada positngan blog agar text script code kelihatan berbeda dengan tulisan yang bukan script code, jika blog kita adalah blog untuk membahas mengenai bahasa pemrograman misalnya, maka plugin syntax higlighter wajib anda pasang, karena setiap uraian script kode bahasa pemrograman yang ditempel pada postingan blog akan disajikan dengan format penulisan yang berbeda sehingga mudah untuk dibaca dan enak untuk dilihat.

Banyak sekali plugin syntax higlighter yang bisa kita pasang, salah satu yang saya sukai adalah Prettify. karena plugin yang satu ini boleh dibilang ringan, tidak banyak menggunakan external javascript dan mudah untuk memasangnya.

Langkah Memasang plugin Prettify pada blog

Sebagai contoh jika anda berhasil memasang plugin prettify ini maka hasilnya seperti tampilan dibawah ini. anda bisa lihat script blog yang dihiglight menggunakan plugin tersebut.
Bagaimana cara memasang plugin syntax highlighter pada blog berflatform blogspot dengan menggunakan plugin "Prettify". berikut langkah-langkahnya:


1. masuk ke akun blogger anda, kemudian Pilih Menu Template dan Tekan Tombol Edit HTML.

2. Pada template Editor silahkan Tekan Tombol CTRL+F untuk melakukan pencarian

3. Cari kode </head> kemudian silahkan anda sisipkan script dibawah ini tepat sebelum kode </head>.

<link href=' http://google-code-prettify.googlecode.com
/svn/trunk/src/prettify.css' rel='stylesheet'/>

4. Cari Kode </body> dan sisikap kode dibawah ini sebelum kode </body>

 /*SYNTAX HIGHLIGHTER*/
 <script src='http://google-code-prettify.googlecode.com/
svn/trunk/src/prettify.js'/>
<script>prettyPrint();</script> 

5. Cari kode ]]></b:skin> dan sisipkan kode dibawah sebelum kode tersebut. Ini untuk memanipulasi tampilan snipet, anda bisa memodifikasi css berikut sesuai dengan keinginan.

/*SYNTAX HIGHLIGHTER*/
pre.prettyprint, code.prettyprint {
 background-color: black;
 padding:5px;
 color #fff;
 border:1px solid gray;
 overflow:auto;

pre .nocode {
 background-color: none;
 color: #000 
}
pre .str { 
 color: #FFC0CB 
}
pre .kwd {
 color: #f0e68c;
 font-weight: bold 
}
pre .com {
 color: #87ceeb 
}
pre .typ {
 color: #98fb98 
}
pre .lit {
 color: #FFA07A 
}
pre .pun {
 color: #fff 
}
pre .pln {
 color: #fff 
}
pre .tag {
 color: #f0e68c; 
}
pre .atn {
 color: #bdb76b;
 font-weight: bold 
}
pre .atv {
 color: #90EE90 
}
pre .dec {
 color: #98fb98 
}
ol.linenums { /* IE indents via margin-left */
 margin-top: 0;
 margin-bottom: 0;
 color: #AEAEAE 
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { }
li.L1,li.L3,li.L5,li.L7,li.L9 { /* Alternate shading for lines */
 background:#555;
}

6. Untuk code yang ingin di highlight,gunakan mode HTML pada editor artikel anda dan letakan potongan kode diantara tag <pre> seperti contoh dibawah ini:

<pre class="prettyprint">
//kode disini
......
</pre>