Memasang Syntax Highlighter di Blog

Oleh Unknown

Selasa, 03 Juni 2014

Bagikan :

Tweet

Memasang Syntax Highlighter di Blog - Jika blog kita berisi tutorial blog, otomatis blog kita akan banyak mempergunakan kode-kode dalam postingannya. Dan untuk membedakan kode-kode di dalam postingan dengan tulisan biasa, kita bisa menggunakan blockquote. Caranya pun juga mudah. Kita tinggal memasukkan kodenya saat memposting dan memblok-nya, kemudian kita tinggal mengklik icon Blockquote pada menu-menu di atas postingan saat Entri Baru. Kode akan langsung tampil berbeda dengan tulisan biasa. 

Tapi, penggunaan blockquote ini sebenarnya masih kurang. Banyak pembaca merasa kebingungan saat melihat kode-kode tersebut, terlebih jika kode tersebut panjang sekali. Hal itu dikarenakan warna pada kode-kode tersebut sama. Si pembaca pun akan tampak kesulitan dalam memahami kode-kode tersebut. Maka dari itu, kita perlu yang namanya Syntax Highlighter. Selain kita bisa membedakan kode dengan tulisan biasa, kode-kodenya juga akan tampak berwarna. Dan pewarnaan pada kode-kode tersebut dibedakan pada jenis kodenya. Sehingga, si pembaca pun juga tidak akan kesulitan dalam mencerna kode-kodenya.

Untuk memasang Syntax Highlighter ini cukup simple. Dan kali ini saya memberikan Syntax Highlighter jenis Highlight.js tapi tampilannya mirip seperti PRISM. 

Cara Pemasangan

Pertama, silahkan simpan Javascript berikut di atas </body>

<script src='https://googledrive.com/host/0Bz1G_DN4b2PtalJhcVBTMUttVDg' type='text/javascript'/>

Lalu, simpan CSS-nya di atas ]]></b:skin> atau </style>

pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#F7F7F9;border:1px solid #ddd;border-left:3px solid #bbb;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:600px;}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#994500}
#comments code{color:#994500;}
pre code{padding:0!important;color:#994500;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#994500;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#881280}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#227bc0}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#994500}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#881280}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#b43d3d;}
pre .deletion{color:#834054}
pre .tex .formula{background:#eee8d5}

Jika sudah, simpan template.

Cara Penggunaan

Untuk penggunaanya pada postingan, seperti di bawah ini.

<pre><code>....Kode HTML, CSS, atau JavaSript di sini....</code></pre>

Tapi, anda juga harus memparse kode yang akan anda masukkan di postingan terlebih dahulu, agar kodenya bisa tampil di postingan. Untuk demonya, silahkan klik link dibawah ini.

DEMO

Baca juga lanjutannya : Memasukkan Kode dan Blockqute Pada Komentar

Tag : Blogging