Cara Memasang Syntax Highlighter Pada Tag Blockquote

Syntax Highlighter Pada Tag Blockquote - Pada Kesempatan yang lalu, saya pernah memposting Tutorial tentang Cara Memasang Prism Syntax Highlighter. Nah, Pada kesempatan kali ini saya akan posting Bagaimana Cara Memasang Syntax Highlighter Pada Tag Blockquote. Jika sebelumnya 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.