.jpg)
Syntax Highlighter atau Syntax Highlighting merupakan sebuah fungsi yang terbangun dari javascript dan kode css yang mampu menciptakan pewarnaan pada posting kode html. Pemanfaatan syntax highlighting akan membuat sebuah posting dalam bentuk kode html menjadi lebih mudah dipahami/dicermati karena beberapa kode tertentu mempunyai warna yang saling berbeda. Sebagai contoh hasil pemanfaatan syntax highlighter sampeyan bisa melihatnya dari beberapa kode HTML baik yang berupa kode css, javascript ataupun xHTML yang terposting di blog ini. Meskipun sebenarnya ada cukup banyak syntax highlighter atau syntax highlighting yang dikenal dan bisa dimanfaatkan untuk melengkapi blog, namun untuk kali ini kita akan utamakan Prettify Syntax Highlighting dengan pertimbangan penggunaan javascript yang terbilang relatif paling ringan dengan beban tak lebih dari 13kbyte. Untuk membuat javascript dan kode CSS bisa bekerja menciptakan kode html dalam tampilan berbagai warna, kita hanya memerlukan tambahan jquery-1.3.2.js atau jQuery-1.3.2.min.js.
Cara Membuat Prettify Syntax Highlighter
- Download seluruh kode : Download javascript dan kode CSS yang sudah dalam bentuk link dan siap pakai dengan cara KLIK link di bawah ini :
- Login to Blogger/Login ke BloGGer : Tuliskan User Name/Nama Pengguna atau Email Address dan Password/Sandi. Lanjutkan dengan KLIK Login.
- Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
- Design/Rancangan : KLIK link "Edit HTML".
- Edit HTML : Lakukan "Backup Template" dengan KLIK "Download Full Template/Download Template Lengkap", kemudian "Save/Simpan" file template di "Folder PC".
- Tetap di Edit HTML : Find HTML Code/Cari kode HTML "<head>.
- Copy-Paste : Copy seluruh kode "hasil Download" dan pastekan di atas kode <head>.
- Find HTML Code/Cari Kode HTML : Cari Kode </body> dan letakkan kode berikut tepat di atasnya. Kode dan posisinya adalah seperti berikut :
- SAVE Template/Simpan Template : KLIK "SAVE Template/Simpan Template"
<script type='text/javascript'>
jQuery(function($){
prettyPrint();
});
</script>
</body>
Bentuk pemasangan link jquery-1.3.2.min.js, prettify.js dan prettify.css di atas kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/gubhugreyot/.../bgsGR_prettify-min.js' type='text/javascript'/>
<link href='http://h1.ripway.com/gubhugreyot/.../prettify.css' rel='stylesheet' type='text/css'/>
<head>
Cara Menggunakan kode HTML di Posting
Untuk Penulisan Kode CSS
<pre class="prettyprint lang-css"><div class="pretty">
Tuliskan Kode CSS di sini
</div></pre>
Contoh Penulisan
<pre class="prettyprint lang-css><div class="pretty">#jtips{
max-width:230px;;
font-family:Arial;
font-size:11px;
color:#fbf7be;
text-align:center;
text-shadow:0px 1px 0px #aca99e;
padding: 10px 0 30px 0;
position:absolute;
border:5px solid #ccc;
}</div></pre>
Untuk Penulisan Script/Javascript
<pre class="prettyprint lang-js"><div class="pretty">
Tuliskan script/javascript di sini!
</div></pre>
Contoh Penulisan
<pre class="prettyprint lang-js><div class="pretty"><script type='text/javascript'>
jQuery(function($){
prettyPrint();
});
</script></div></pre>
Untuk Penulisan Kode HTML
<pre class="prettyprint lang-html"><div class="pretty">
Tuliskan Kode xTML di sini!
</div></pre>
Catatan/Keterangan :
- Sampeyan dapat menambahkan style="height:...px;" pada :
<pre class="prettyprint lang-..." style="height:...px;">
apabila kode cukup banyak hingga ketinggian harus dibatasi/diatur - Penulisan xHTML seperti halnya penulisan pada kode css atau javascript.
- Untuk merubah beberapa variabel dalam prettify syntax highlighter dilakukan dengan merubah kode css.
- Apabila di template sampeyan terdapat kode css yang berupa syntax (kode) pre { .....} (bawaan template), hapus kode tersebut karena syntax "pre" telah disertakan di dalam kode css hasil download.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Manstaffffff..... belum nyampe nih!!!!!!!!
BalasHapusselamat malam pak
thanks tutornya bos...
BalasHapusLink download script dilaporkan sebagai situs penyerang
BalasHapusWow mantab banget bro... thx
BalasHapus