Syntax Highlighter Pada Blockquote, Bagi seorang blogger syntax higlighter ini merupakan komponen penting untuk membuat postingan, apalagi bagi blog yang menyediakan tutorial tentang modifikasi tampilan blog ataupun yang lainya.. Pada umumnya syntax highlighter digunakan untuk menuliskan code pada postingan dengan menggunakan class atau tag yang dituliskan secara manual, salah satunya sepeerti contoh berikut ini:
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>
Tidak semuanya menggunakan class atau tag sperti itu, ada yang disesuaikan dengan pengelompokan code itu sendiri seperti CSS, HTML, Java dll.
Oke, masuk pada pembahasan disini saya memanipulasi alias menerapkan syntax highlighter pada blockquote, awalnya hanya coba-coba dan ternyata berhasil, jadi kita tidak perlu lagi menuliskan tag pembuka dan penutup secara manual seperti contoh diatas, cukup tinggal "quote" saja tulisan yang kita inginkan. Saya mendapatkan ide ini setelah melihat syntax highlighter yang diterapkan pada komentar..
Cara ini sudah saya coba dan berhasil, meskipun hasilnya sedikit berbeda dibanding dengan penerapan secara manual seperti contoh diatas..
Disini kita menggunakan Syntax Highlighter dari Softwaremaniacs yang sebelumnya pernah dibahas diblognya Kang Ismet...
Langsung pada Pemasangan Syntax Highlighter Pada Blockquote
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. Kemudian Simpan..
Tinggal kalian sesuaikan sendiri, ada banyak pilihan CSS untuk Syntax Highlighter tersebut, untuk Demo cssnya bisa dilihat DISINI
dan untuk kode CSSnya bisa ambil DISINI.

Coba lihat kode .post-body, .post-body p, div.post-body, #text-body, #main_text  itu merupakan beberapa kode yang membungkus text pada postingan, sudah saya sesuaikan dengan beberapa template, template umum dan template yang dari blog ini..

Untuk hasilnya kalian bisa coba membuat postingan dan menuliskan kode lalu di Quote, kemudian publish postingan tersebut dan lihat hasilnya, jika tulisan yang diQuote tersebut berwarna-warni, maka Selamat anda berhasil (h)....

Demikian potingan tentang Manipulasi Syntax Highlighter Pada Blockquote semoga bermanfaat...