Cara Memasang Syntax Highlighter Pada Tag Blockquote

Pada kesempatan kali ini saya akan posting bagaimana Cara Memasang Syntax Highlighter Pada Tag Blockquote. Jika biasanya sobat harus menerapkan kode pemanggil di mode HTML, sekarang sobat tidak perlu repot repot menerapkan kode pemanggil di mode HTML lagi, karena kita akan menggabungkannya dengan tag Blockquote.

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

/*

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;

}

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.