--> Skip to main content
Home Blogger Teknologi Cara Memasang Kotak Syntax highlighter Di Blogger

Cara Memasang Kotak Syntax highlighter Di Blogger

Rudiruzt Monday 13 April 2020



Cara Memasang Kotak Syntax Highlighter Di Blogger - Kotak Syntax highlighter adalah salah satu kode atau widget yang berfungsi untuk menampilkan potongan code script  yang dibuat pada sebuah postingan blog agar script code terlihat berlainan dengan tulisan yang lain.

apabila blog tersebut merupakan situs atau blog untuk mengulas tentang bahasa pemrograman maka plugin/kotak syntax higlighter dapat digunakan agar postingan menjadi lebih menarik, gampang untuk di baca serta enak untuk dilihat dan kaji oleh para pengunjung blog.

Format kotak syntax higlighter yang dapat digunakan untuk membuat kotak pemisah antara tulisan kode dengan tulisan biasa, salah satunya menggunakan  “Prettify”. karna plugin yang satu ini sangat ringan untuk loading blog, sedikit memakai external javascript serta gampang untuk memasangnya. Berikut ini adalah cara atau langkah - langkah untuk memasang syntax higlighter mengguanakan pluggin  “Prettify”.


Cara Memasang Kotak Syntax Highlighter Di Blogger 



  • 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> kemudian  tempel 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>  kemudian tempel 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 simpan template tersebut.


      • Langkah selanjutnya, silahkan kalian coba membuat artikel. Untuk memasukan mode Syntax highlighter ini, masukan kode khusus dibawah ini pada bagian mode HTMLnya bukan pada mode Composenya 


      <pre class="prettyprint">

 //letakan kodenya disini . . . 

</pre>