Cara Memasang Plugin Prettify Syntax Highlighter Pada Blog

Plugin Syntax highlighter berfungsi untuk menampilkan pecahan code bahasa pemrograman yang kita tempel pada positngan blog semoga 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 arahan 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 akhirnya menyerupai 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 arahan </head> lalu silahkan anda sisipkan script dibawah ini sempurna sebelum arahan </head>.

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

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

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

5. Cari arahan ]]></b:skin> dan sisipkan arahan dibawah sebelum arahan 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 pecahan arahan diantara tag <pre> menyerupai pola dibawah ini:

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

Share this post