Highlight.js Syntax Highlighter untuk Blogger

Highlight.js Syntax Highlighter for Blogger - Pada postingan ini saya akan memberikan tutorial cara membuat Syntax Highlighter untuk Blogger dari Softwaremaniacs. 

Untuk hasil yang lebih aman, silahkan download JavaScriptnya DISINI, dan ikuti petunjuk yang diberikan. Apabila Kalau merasa malas melakukan hal itu, silahkan ikuti langkah-langkah dibawah ini :

Langkah Pertama - Menyimpan Javascript.
Letakkan kode java script ini tepat diatas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>

    <script>

      hljs.initHighlightingOnLoad();

    </script>

Langakah kedua - Pemilihan CSS.

Jika ingin memilih css lihat demo DISINI.
Jika sudah ketemu, lihat kode CSS DISINI.

Simpan CSS tersebut di atas ]]></b:skin>, atau sobat bisa gunakan 2 CSS yang saya ambil dari Github.

1. Railscasts

/*

Railscasts-like style (c) Visoft, Inc. (Damien White)

*/

pre code {
  display: block;
  padding: 0.5em;
  background: #232323;
  color: #E6E1DC;
}

pre .comment,
pre .template_comment,
pre .javadoc,
pre .shebang {
  color: #BC9458;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title,
pre .method,
pre .list .title {
  color: #C26230;
}

pre .string,
pre .number,
pre .regexp,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command,
pre .markdown .link_label {
  color: #A5C261;
}

pre .subst {
  color: #519F50;
}

pre .tag,
pre .tag .keyword,
pre .tag .title,
pre .doctype,
pre .sub .identifier,
pre .pi,
pre .input_number {
  color: #E8BF6A;
}

pre .identifier {
  color: #D0D0FF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: none;
}

pre .constant {
  color: #DA4939;
}


pre .symbol,
pre .built_in,
pre .ruby .symbol .string,
pre .ruby .symbol .identifier,
pre .markdown .link_url,
pre .attribute {
  color: #6D9CBE;
}

pre .markdown .link_url {
  text-decoration: underline;
}



pre .params,
pre .variable,
pre .clojure .attribute {
  color: #D0D0FF;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor,
pre .preprocessor *{
  color: #8996A8 !important;
}

pre .hexcolor,
pre .css .value .number {
  color: #A5C261;
}

pre .title,
pre .decorator,
pre .css .function {
  color: #FFC66D;
}

pre .diff .header,
pre .chunk {
  background-color: #2F33AB;
  color: #E6E1DC;
  display: inline-block;
  width: 100%;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
  display: inline-block;
  width: 100%;
}

pre .addition {
  background-color: #144212;
  color: #E6E1DC;
  display: inline-block;
  width: 100%;
}

pre .deletion {
  background-color: #600;
  color: #E6E1DC;
  display: inline-block;
  width: 100%;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.7;
}

2. Foundation

/*
Description: Foundation 4 docs style for highlight.js
Author: Dan Allen <dan.j.allen@gmail.com>
Website: http://foundation.zurb.com/docs/
Version: 1.0
Date: 2013-04-02
*/

pre code {
  display: block; padding: 0.5em;
  background: #eee;
}

pre .decorator,
pre .annotation {
  color: #000077;
}

pre .attribute {
  color: #070;
}

pre .value,
pre .string,
pre .scss .value .string {
  color: #d14;
}

pre .comment {
  color: #998;
  font-style: italic;
}

pre .function .title {
  color: #900;
}

pre .class {
  color: #458;
}

pre .id,
pre .pseudo,
pre .constant,
pre .hexcolor {
  color: teal;
}

pre .variable {
  color: #336699;
}

pre .javadoc {
  color: #997700;
}

pre .pi,
pre .doctype {
  color: #3344bb;
}

pre .number {
  color: #099;
}

pre .important {
  color: #f00;
}

pre .label {
  color: #970;
}

pre .preprocessor {
  color: #579;
}

pre .reserved,
pre .keyword,
pre .scss .value {
  color: #000;
}

pre .regexp {
  background-color: #fff0ff;
  color: #880088;
}

pre .symbol {
  color: #990073;
}

pre .symbol .string {
  color: #a60;
}

pre .tag {
  color: #007700;
}

pre .at_rule,
pre .at_rule .keyword {
  color: #088;
}

pre .at_rule .preprocessor {
  color: #808;
}

pre .scss .tag,
pre .scss .attribute {
  color: #339;
}

Cara Penggunaan

Untuk menggunakan Highlight.js ini, sangatlah mudah, kita tidak perlu menentukan bahasanya, hanya tinggal tulis seperti ini :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Sumber: blog.kangismet.net