Menambahkan Syntax Highlighter Keren dan Simple dengan Google Code Prettify

Sumber Gambar : www.shetoldme.in

Menambahkan Syntax Highlighter Keren dan Simple dengan Google Code Prettify - Selamat sore sahabat blogger semuanya, jumpa lagi dengan saya guzko di blog yang sederhana ini. Semoga kunjungan para sahabat semuanya disini bisa berkesan dan mendapatkan apa yang sahabat cari selama ini.

Sesuai judul diatas Menambahkan Syntax Highlighter Keren dan Simple dengan Google Code Prettify , kali ini saya akan memberikan sahabat tutorial bagaimana caranya menambahkan syntax highlighter di blog yang sahabat kelola. Mungkin diantara sahabat belum tau apa itu syntax highlighter. Jadi syntax highlighter itu seperti gambar dibawah ini : 

nah syntax highlighter itu seperti itu sahabat blogger. Bagi sahabat blogger yang konten dari blognya merupakan kebanyakan berisi tutorial khususnya tutorial pemrograman, seperti blog saya ini, saya pikir menambahkan syntax highlighter ini perlu. Karena akan sedap dan enak dipandang mata serta kode tutorial program juga akan lebih terstruktur, sehingga pembaca akan lebih mudah memahami kode program.

Jika sahabat searching di google, sahabat blogger akan menemukan banyaknya syntax highlighter yang bertebaran di internet. Blog saya ini juga sudah berkali-kali ganti kode syntax highlighter, namun kode syntax highlighter dari google ini yang paling mudah diterapkan dan tidak rumit. 

Kelebihan Google Code Prettify :

1. Mudah untuk diterapkan di blog.
2. Mendukung banyak bahasa pemrograman mulai dari desktop (java, vb, sql, dll) serta juga untuk web programming (css,javascript, html, php dll.)
3. Loading ringan.
4. Banyak tema yang bisa digunakan, tinggal dipilih.
5. dan masih banyak lagi yang lainnya... 

kelebihan yang saya utarakan diatas menurut saya ya, jadi mohon maaf kalau salah. Hehe....

Sepertinya sudah cukup saya koar-koar, sekarang waktunya bagaimana meng-implementasikan google code prettify kedalam blogger sahabat.

Cara Penggunaan Google Code Prettify

Siapkan terlebih dahulu file yang diperlukan yaitu (prettify.css dan prettify.js). File tersebut bisa di download melalui link ini (Google Code Prettify)

jika sahabat mendownload file dari link diatas, sahabat blogger harus meletakan kode js dan css tersebut pada web server namun jika sahabat blogger tidak mau ribet bisa juga langsung dari drive google saya seperti ini :

untuk kode cssnya :

<link href='https://googledrive.com/host/0B30VwwT7L70jNE5ZWVkyb0NZTWM' rel='stylesheet'/>

untuk kode js nya :

<script src='https://cd14906c4a95b5650b52775ab20e66fac61462b3.googledrive.com/host/0B30VwwT7L70jYnJTVEs2Sm93ZDg'/>

Letakkan kode css diatas tepat diatas kode </head>

Kemudian Letakkan kode js dibawah ini tepat diatas </body>

<script src='https://cd14906c4a95b5650b52775ab20e66fac61462b3.googledrive.com/host/0B30VwwT7L70jYnJTVEs2Sm93ZDg'/>
<script>
window.onload = (function(){ prettyPrint(); });
</script>

jika sudah sekarang simpan template sahabat blogger. Cara penerapannya sangat gampang, sahabat tinggal tambahkan code seperti dibawah ini :

<pre class="prettyprint">
......kode program (vb,sql,php,css,java,javascript,dll)
</pre>

*NB : Jika kode tersebut adalah kode html, maka kode html harus diparse terlebih dahulu sebelum dimasukkan ke tag <pre>

untuk melalkukan parse html bisa gunakan link berikut : Parse HTML

sekian dulu sahabat blogger semunya tutorial saya tentang Menambahkan Syntax Highlighter Keren dan Simple dengan Google Code Prettify, semoga bisa memberikan manfaat dan inspirasi bagi sahabat blogger semuanya. Kita berjumpa lagi di lain waktu dengan tutorial yang berbeda. Salam....

seee...uuuuuu