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 adalahPrettify”. 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>

6 komentar:

  1. yang mana yang bagus gan, syntax higlighter nya om alex atau prettify? atau jangan2 ke duanya sama? :D

    ReplyDelete
    Replies
    1. Dua-duanya juga bagus gan, yang penting agan load librarynya pada artikel agan yang mengandung script, gunakan mode html, biasanya kalo di letakan templatenya suka mengurangi kecepatan loading blog,

      Delete
  2. kalau untuk kode php, menggunakan apa ya mas didin?

    ReplyDelete
    Replies
    1. Sama saja mas, cuma beda penempatan untuk css n javascriptnya, letakan saja setelah kode </head

      Delete
  3. Bang Didin, kalo susunan kode librarynya kita taro di b:skin, akan mempercepat perenderan gak, atau loading Blognya?

    Soalnya di google page speed disarankan di taro di badan tamplate aja

    ReplyDelete
    Replies
    1. Sepertinya tidak semua artikel ada syntac kode yang di higtlige jadi dianggap tidak digunakan scriptnya.

      jika memang hanya disebagian artikel saja, lebih baik didalam artikel scriptnya diletakan

      Delete

Silahkan berkomentar yang sesuai dengan topik, Mohon Maaf komentar dengan nama komentator dan isi komentar yang berbau P*RN*GRAFI, OB*T, H*CK, J*DI dan komentar yang mengandung link aktif, Tidak akan ditampilkan!