GeSHi untuk Windows Live Writer

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
  1. /* Pullquotes */
  2. .hidden .pullquote-display {display:none;}
  3. .pullquote-display {position:absolute; width:29.8em; right:-36em; border:.1em solid #d6d6d6; background:#f3f3f3;}
  4. .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;}
  5.  
Parsed in 0.013 seconds at 24.93 KB/s

Yang di atas dikurung dengan elemen <pre> dan berikut adalah yang dikunci dengan elemen <div>

CSS, using GeSHi 1.0.8.6
  1. /* Pullquotes */
  2. .hidden .pullquote-display {display:none;}
  3. .pullquote-display {position:absolute; width:29.8em; right:-36em; border:.1em solid #d6d6d6; background:#f3f3f3;}
  4. .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;}
Parsed in 0.015 seconds at 21.11 KB/s

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 😀

Iklan

2 Comments

  1. Mbak Yuni,

    Bagaimana rasanya pakai Windows Live Writer Mbak? Biasanya penulis yang suka luring (ofline) akan sangat terbantu.

    Ah…, saya hanya belajar untuk sekadar tahu, belajar-nya pun acak-acakan. Seringkali malah membongkar blog teman-teman lain untuk melihat kode apa yang digunakan. Saya juga banyak diajari oleh narablog lainnya.

    Tapi kalau mau belajar serius, ada banyak di internet, yang standar dan lumayan lengkap yang bisa mencoba di W3School: http://www.w3schools.com/ 🙂
    .-= Artikel terakhir blog Cahya: When A Journey End Another is Awaiting =-.

    Suka

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.