Cara Memasang Plugin Prettify Syntax Highlighter Pada Blog

Plugin Syntax highlighter berfungsi untuk menampilkan pecahan 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 instruksi 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 balasannya 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 instruksi </head> lalu silahkan anda sisipkan script dibawah ini sempurna sebelum instruksi </head>.

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

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

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

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

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

Bagikan Artikel ini