Syntax Highlighter Pada Blockquote

Tutorial tentang Syntax Highlighter di internet sudah banyak yang membahasnya dan saya pun tertarik untuk memasangnya di blog saya. Ketika kode sudah di pasang di blog saya dan saya coba eh ternyata gag bisa dan kendalanya juga harus melalui mode HTML untuk memasang kodenya. Sangat merepotkan

Ketika saya blogwalking di blognya kang ismet saya menemukan blognya Abdul Rohman yang beralamat mdf-blog.blogspot.com di sana saya menemukan tutorial yang berjudul Manipulasi Syntax Highlighter Pada Blockquote. Ternyata ini tutorial yang saya butuhkan lalu saya pasang di blog saya dan hasilnya langsung terasa.

Cara Memasang Syntax Highlighter di blog

1. Letakkan kode CSS berikut ini dibawah kode ]]></b:skin>

<style>
/*
Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>
*/
pre code {
display: block; padding: 0.5em;
background: white; color: black;
}
pre .comment,
pre .template_comment,
pre .javadoc,
pre .comment * {
color: #800;
}
pre .keyword,
pre .method,
pre .list .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tag .title,
pre .setting .value,
pre .winutils,
pre .tex .command,
pre.http .title,
pre .request,
pre .status {
color: #008;
}
pre .envvar,
pre .tex .special {
color: #660;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .regexp,
pre .coffeescript .attribute {
color: #080;
}
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .ini .title,
pre .shebang,
pre .prompt,
pre .hexcolor,
pre .rules .value,
pre .css .value .number,
pre .literal,
pre .symbol,
pre .ruby .symbol .string,
pre .number,
pre .css .function,
pre .clojure .attribute {
color: #066;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .typename,
pre .tag .attribute,
pre .doctype,
pre .class .id,
pre .built_in,
pre .setting,
pre .params,
pre .variable,
pre .clojure .title {
color: #606;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .subst {
color: #000;
}
pre .css .class, pre .css .id {
color: #9B703F;
}
pre .value .important {
color: #ff7700;
font-weight: bold;
}
pre .rules .keyword {
color: #C5AF75;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
color: #9B859D;
}
pre .preprocessor,
pre .preprocessor * {
color: #444;
}
pre .tex .formula {
background-color: #EEE;
font-style: italic;
}
pre .diff .header,
pre .chunk {
color: #808080;
font-weight: bold;
}
pre .diff .change {
background-color: #BCCFF9;
}
pre .addition {
background-color: #BAEEBA;
}
pre .deletion {
background-color: #FFC8BD;
}
pre .comment .yardoctag {
font-weight: bold;
}
</style>

2. Letakkan kode berikut ini diatas kode </body>

<script src='http://boyz.googlecode.com/svn/JS/highlighter.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Manipulasi tag pada blockquote
$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {
$('blockquote[class="tr_bq"]').replaceWith(function () {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
});
//]]>
</script>
<script>
hljs.initHighlightingOnLoad();
</script>

3. Simpan

Ada banyak pilihan CSS untuk Syntax Highlighter tersebut, untuk Demo cssnya bisa dilihat DISINI dan untuk kode CSSnya bisa ambil DISINI. Silahkan sesuaikan tampilan CSSnya

Untuk melihat hasilnya coba sobat membuat postingan dan menuliskan code lalau di QUOTE, kemudian terbitkan atau preview jika postingan codenya berwarna-warni seperti di blog saya ini maka selamat sobat sudah berhasil. Semoga postingan Syntax Highlighter Pada Blockquote ini bermanfaat untuk sobat semua. Terima kasih