Generic Syntax Highlighter (disingkat sebagai GeSHi) adalah sebuah pengaya (tidak terverifikasi) yang dapat dipasang pada klien blog Windows Live Writer di sistem operasi kita. Saya mendapatkan ide menggunakan pengaya ini setelah ada masalah pada CSS tema yang sering saya ganti setiap musimnya, sehingga seringkali tampilan sisipan kode (baik CSS maupun XHTML) tidak tampak menarik pada tema (kurang kontras).
Setelah saya mencari beberapa lokasi, saya menemukan si GeSHi ini di koleksi plugin yang baru-baru ini dirilis. Makanya saya pun berniat mencobanya, mari kita lihat bagaimana dia melakukan penandaan dengan syntax.
Pertama-tama, saya akan melakukan cara sederhana menggunakan unsur <pre><code>ini kode contoh</code></pre> sebagaimana yang banyak diterapkan, dan kode contohnya adalah kode CSS untuk fungsi “pullquote” pada blog ini. Jika Anda tidak familiar pada dengan pullquote, maka saya dapat jelaskan dengan contoh: Tulisan dalam kotak kecil di sisi kanan badan blog adalah contoh pullquote.
Nah, itu hanya pernak-pernik blog saja, Mari lihat kode CSS-nya.
/* Pullquotes */
.hidden .pullquote-display {display:none;}
.pullquote-display {position:absolute; width:29.8em; right:-36em; border:.1em solid #d6d6d6; background:#f3f3f3;}
.pullquote-display p {padding:1.3em 1.6em; margin:0; font-variant: small-caps; font-size:1.8em; font-style:italic; line-height:1.333; text-indent:0;}Dan sekarang kita lihat kode yang dibuat oleh plugin default oleh microsoft.
/* Pullquotes */
.hidden .pullquote-display {display:none;}
.pullquote-display {position:absolute; width:29.8em; right:-36em; border:.1em solid #d6d6d6; background:#f3f3f3;}
.pullquote-display p {padding:1.3em 1.6em; margin:0; font-variant: small-caps; font-size:1.8em; font-style:italic; line-height:1.333; text-indent:0;}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Kemudian mari kita lihat dengan menggunakan syntax higlighter pada gaya fancy-nya…
CSS, using GeSHi 1.0.8.6
Yang di atas dikurung dengan elemen <pre> dan berikut adalah yang dikunci dengan elemen <div>…
-
/* Pullquotes */
-
.hidden .pullquote-display {display:none;}
-
.pullquote-display {position:absolute; width:29.8em; right:-36em; border:.1em solid #d6d6d6; background:#f3f3f3;}
-
.pullquote-display p {padding:1.3em 1.6em; margin:0; font-variant: small-caps; font-size:1.8em; font-style:italic; line-height:1.333; text-indent:0;}
Ah…, ya tampilan memang agak kurang memuaskan, mungkin karena saya memilih erudite dengan latar gelap sebagai tema blog, dan juga fonta-nya tampak besar jika mesti diserasikan dengan blog ini.
Saya rasa mungkin saya tidak akan menggunakannya. Tapi siapa tahu ada yang tertarik, silakan mengunjungi halaman pengembangan GeSHi langsung untuk mendapatkan pengaya yang satu ini. Atau jika Anda berminat, masih ada beberapa pengaya lainnya yang memiliki fungsi serupa.
Saya juga bukan web developer yang akan menghabiskan banyak waktu dengan kode-kode ini, hi hi…, hanya sekadar ingin tahu saja. Jadi kalau ada pertanyaan, mohon maaf saya tidak selalu bisa menjawab sedemikian hingga jawabannya tidak menyesatkan 😀
Tinggalkan Balasan