Highlighter Pre Tag Blog

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

Thanks for reading Highlighter Pre Tag Blog. Please share...!

About Fran Fallo

Related Posts