Perhatikanlah kode dibawah ini penuh
dengan warna-warni, dan pasti anda bertanya dalam hati bagaimana cara
membuatnya , ikuti prosedur di bawah ini, karena itu code HTML, JavaScript, CSS
karena code
tersebut ditulis berdasrakan class atau tag yang dan bukan hanya
memperindah tetapi mempermudah orang untuk mengedit dan memodifikasi
serta mengetahui classnya ol;eh karena itu Syntax higlighter ini
merupakan komponen yang sangat penting untuk membuat
postingan yang berkaita dengan code HTML, JavaScript, CSS Dll, 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>
1. Letakkan kode CSS berikut ini dibawah kode ]]></b:skin>
<style>
/*
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..
4. Lihat hasilnya
Bacalah Dengan teliti Untuk
Mempraktekannya dan Jika ada link yang rusak mohon disampaikan lewat
kotak kementar di bawah postingan blog...makasih atas dukungannya
