Cara Memasang Kotak Syntax highlighter Di Blog

komputerdia.comKotak Syntax highlighter merupakan salah satu kode atau widget yang berfungsi untuk menampilkan potongan code bhs pemrograman yang akan kalian tempel pada sebuah positngan situs (blog) supaya text script code terlihat berlainan dengan tulisan yang bukanlah script code, bila situs (blog) kalian merupakan situs (blog) untuk mengulas tentang bhs pemrograman maka plugin/kotak syntax higlighter haruslah kaliangunakan, karna tiap-tiap uraian script kode bhs pemrograman yang ditempel pada tulisan situs (blog) bakal dihidangkan dengan format penulisan yang berlainan hingga gampang untuk di baca serta enak untuk diliat dan kaji oleh para visitor blog kalian.

Saat ini, tentunya telah banyak plugin atau format kotak syntax higlighter yang dapat kaliangunakan untuk membuat kotak pemisah antara tulisan kode dengan tulisan biasa, satu diantara yang saya gemari yaitu “Prettify”. karna plugin yang satu ini bisa disebut enteng, sedikit memakai external javascript serta gampang untuk memasangnya. Berikut ini adalah cara atau langkah - langkah untuk memasang  syntax higlighter di blog kalian 

Baca Juga :

Cara Memasang Kotak Syntax highlighter Di Blog

Cara Memasang Plugin Syntax highlighter
  • Langkah pertama silahkan kalian masuk ke akun blogger kalian dan masuklah pada bagian menu template dan pilih edit HTML .
  • Cari kode </head> gunakan tombol ctrl+f untuk memudahkan pencarian kode, kemudian tempelkan kode dibawah ini tepat diatas kode </head> .
<link href=' http://google-code-prettify.googlecode.com /svn/trunk/src/prettify.css' rel='stylesheet'/>
  • Langkah selanjutnya cari kode </body>, dan silahkan kalian copy kode berikut ini tepat diatas kode </body> .
/*SYNTAX HIGHLIGHTER*/  <script src='http://google-code-prettify.googlecode.com/ svn/trunk/src/prettify.js'/> <script>prettyPrint();</script> 
  • Langkah selanjutnya temukan kode ]]></b:skin> , dan silahkan masukan kode berikut ini tepat diatas kode ]]></b:skin> .
/*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; }
  • Jika semua sudah di copy, silahkan kalian simpan template tersebut

Baca Juga :

  • Langkah selanjutnya, silahkan kalian coba membuat artikel. Untuk memasukan mode Syntax highlighter ini <pre class="prettyprint"> //.........</pre>, silahkan kalian masukan kode khusus dibawah ini pada bagian mode HTMLnya bukan pada mode Composenya 
Cara Memasang Kotak Syntax highlighter Di Blog
  • Untuk lebih jelasnya , silahkan kalian perhatian penulisan dibawah ini
<pre class="prettyprint">

 //Silahkan kalian letakan kodenya disini . . . 

</pre>




.
.

Berlangganan Artikel terbaru (free):

Post a Comment