Cara Memasang Syntax Highlighter Pada 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.
