Penulis Syntax highlighter merupakan kebutuhan penting dari sebuah situs yaitu untuk menampilkan kode pemograman. Tujuanya adalah untuk membedakan antara text kode script dan yang bukan sehingga mudah dibaca dan di pahami.
Saya menggunakan Google prettify karena lebih cepat dan efisien serta mendukung banyak theme syntax highlighter lainya.
Dan tutorial kali saya akan menuliskan bagaimana cara menambahkan syntax highlighter di blogger dengan menggunakan code google prettify.
Copy kode script google prettify di bawah ini kemudian tambahkan tepat di atas tag </head>
Menempatkan Kode HTML di Posting Blog Sebelum menambahkan kode HTML ke dalam posting blog, ubah (convert) dari file html menjadi parser dengan html parser tool.
Sebagai contoh saya akan menggunakan kode HTML di bawah ini.
Copy kode HTML kamu dan paste ke dalam parser tool lalu klik tombol warna merah (parse adsense (or) HTML)
Kemudian copy kode hasil convert (kode yang di blok) dan paste pada posting blog antara kode tag <pre class="prettyprint">.....</pre>
Jika sudah, pilih mode HTML kemudian paste kode yang sudah di convert pada kode antara <pre class='prettyprint'>....</pre>, kemudian publish posting blog atau pratinjau dulu untuk melihat hasilnya. Jika langkahnya benar hasil akhir seperti gambar berikut.
Gunakan class linenums untuk menempatkan nomor baris dalam kode.
Tambahkan kode css theme prettify berikut di atas tag </head>
Untuk hasilnya silahkan lihat Demo
Kode css diatas berfungsi untuk merubah tampilan, jenis font, warna dan yang lain. Sehingga sobat dapat modifikasinya sendiri sesuai dengan keinginan. Untuk custom kode css yang lain, silahkan kunjungi halaman themes gallery
Thanks you for read!
Saya menggunakan Google prettify karena lebih cepat dan efisien serta mendukung banyak theme syntax highlighter lainya.
Dan tutorial kali saya akan menuliskan bagaimana cara menambahkan syntax highlighter di blogger dengan menggunakan code google prettify.
Memasang Code Google Prettify di Blog
Copy kode script google prettify di bawah ini kemudian tambahkan tepat di atas tag </head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/ run_prettify.js"></script>
Menempatkan Kode HTML di Posting Blog Sebelum menambahkan kode HTML ke dalam posting blog, ubah (convert) dari file html menjadi parser dengan html parser tool.
Sebagai contoh saya akan menggunakan kode HTML di bawah ini.
<!DOCTYPE html> <html> <head> <meta charshet="utf-8'> <title>nubie theme</title> </head> <body> <p>belajar syntax hightlighter</p> </body> </html>
<pre class='prettyprint'> tulis kode disini </pre>
Jika sudah, pilih mode HTML kemudian paste kode yang sudah di convert pada kode antara <pre class='prettyprint'>....</pre>, kemudian publish posting blog atau pratinjau dulu untuk melihat hasilnya. Jika langkahnya benar hasil akhir seperti gambar berikut.
<!DOCTYPE html> <html>< head> <meta charshet="utf-8"> <title>nubie theme</title> </head> <body> <p>belajar syntax hightlighter</p> </body> </html>
Menambahkan Nomor Baris Dalam Kode Script
Gunakan class linenums untuk menempatkan nomor baris dalam kode.
<pre class='prettyprint linenums'> tulis kode disini </pre>Hasilnya!
<!DOCTYPE html> <html> <head>< <meta charshet="utf-8"> <title>nubie theme</title> </head> <body> <p>belajar syntax hightlighter</p> </body> </html>
Menambahkan CSS Syntax Highghter Prettify
Tambahkan kode css theme prettify berikut di atas tag </head>
<style type="text/css">
.prettyprint {
background : #fff;
font-family : Menlo, "Bitstream Vera sans Mono", "dejaVu Sans Mono",
Monaco, Consolas, monospace;
border : 0 !important;
}
.pln {
color : #333;
}
ol.linenums {
margin-top : 0; color : #cccccc;
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
padding-lef : 1em;
background-color : #fff;
list-style-type : decimal;
}
@media screen {
.str {color : #183691;}
.kwd {color : #a71d5d;}
.com {color : #969896;}
.typ {color : #0086b3;}
.lit {color : #0086b3;}
.pun {color : #333;}
.opn {color : #333;}
.tag {color : #000080;}
.atn {color : #795da3;}
.atv {color : #183691;}
.dec {color : #333;}
.var {color : #00880;}
.fun {color : #900;}
}
</style>
Untuk hasilnya silahkan lihat Demo
Kode css diatas berfungsi untuk merubah tampilan, jenis font, warna dan yang lain. Sehingga sobat dapat modifikasinya sendiri sesuai dengan keinginan. Untuk custom kode css yang lain, silahkan kunjungi halaman themes gallery
Thanks you for read!
EmoticonEmoticon