Cara Memasang Plugin Prettify Syntax Highlighter Pada Blog

Plugin Syntax highlighter berfungsi untuk menampilkan bagian code bahasa pemrograman yang kita tempel pada positngan blog biar text script code kelihatan berbeda dengan goresan pena yang bukan script code, kalau blog kita yakni blog untuk membahas mengenai bahasa pemrograman misalnya, maka plugin syntax higlighter wajib anda pasang, alasannya setiap uraian script isyarat bahasa pemrograman yang ditempel pada postingan blog akan disajikan dengan format penulisan yang berbeda sehingga gampang untuk dibaca dan lezat untuk dilihat.

Banyak sekali plugin syntax higlighter yang dapat kita pasang, salah satu yang saya sukai adalah “Prettify”. karena plugin yang satu ini boleh dibilang ringan, tidak banyak memakai external javascript dan gampang untuk memasangnya.

Langkah Memasang plugin Prettify pada blog

Sebagai pola kalau anda berhasil memasang plugin prettify ini maka jadinya ibarat tampilan dibawah ini. anda dapat lihat script blog yang dihiglight memakai plugin tersebut.
Bagaimana cara memasang plugin syntax highlighter pada blog berflatform blogspot dengan memakai plugin "Prettify". berikut langkah-langkahnya:


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

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

3. Cari isyarat </head> lalu silahkan anda sisipkan script dibawah ini sempurna sebelum isyarat </head>.

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

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

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

5. Cari isyarat ]]></b:skin> dan sisipkan isyarat dibawah sebelum isyarat tersebut. Ini untuk memanipulasi tampilan snipet, anda dapat 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 bagian isyarat diantara tag <pre> ibarat pola dibawah ini:

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