Cara Pemasangan

Simpan JavaScript di bawah ini di atas </head>

<script src='http://reader-hosting.googlecode.com/svn/trunk/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Jika anda ingin menggunakan JavaScript sendiri, silahkan download javascriptnya di Di sini dan ganti script bertanda di atas.

Selanjutnya simpan code CSS di bawah ini tepat diatas ]]></b:skin> atau </style>

Tema Default

/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev 
*/
pre code {
    display: block;
    padding: 0.5em;
    background: #F0F0F0;
}

pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
    color: black;
}

pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
    color: #800;
}

pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
    color: #888;
}

pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
    color: #080;
}

pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
    color: #88F;
}

pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
    font-weight: bold;
}

pre .asciidoc .emphasis,
pre .markdown .emphasis {
    font-style: italic;
}

pre .nginx .built_in {
    font-weight: normal;
}

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

Tema Zenburn

/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov 
based on dark.css by Ivan Sagalaev
*/
pre code {
    display: block;
    padding: 0.5em;
    background: #3F3F3F;
    color: #DCDCDC;
}

pre .keyword,
pre .tag,
pre .css .class,
pre .css .id,
pre .lisp .title,
pre .nginx .title,
pre .request,
pre .status,
pre .clojure .attribute {
    color: #E3CEAB;
}

pre .django .template_tag,
pre .django .variable,
pre .django .filter .argument {
    color: #DCDCDC;
}

pre .number,
pre .date {
    color: #8CD0D3;
}

pre .dos .envvar,
pre .dos .stream,
pre .variable,
pre .apache .sqbracket {
    color: #EFDCBC;
}

pre .dos .flow,
pre .diff .change,
pre .python .exception,
pre .python .built_in,
pre .literal,
pre .tex .special {
    color: #EFEFAF;
}

pre .diff .chunk,
pre .subst {
    color: #8F8F8F;
}

pre .dos .keyword,
pre .python .decorator,
pre .title,
pre .haskell .type,
pre .diff .header,
pre .ruby .class .parent,
pre .apache .tag,
pre .nginx .built_in,
pre .tex .command,
pre .prompt {
    color: #efef8f;
}

pre .dos .winutils,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .string {
    color: #DCA3A3;
}

pre .diff .deletion,
pre .string,
pre .tag .value,
pre .preprocessor,
pre .built_in,
pre .sql .aggregate,
pre .javadoc,
pre .smalltalk .class,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .css .rules .value,
pre .attr_selector,
pre .pseudo,
pre .apache .cbracket,
pre .tex .formula,
pre .coffeescript .attribute {
    color: #CC9393;
}

pre .shebang,
pre .diff .addition,
pre .comment,
pre .java .annotation,
pre .template_comment,
pre .pi,
pre .doctype {
    color: #7F9F7F;
}

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

Banyak pilihan CSS yang bisa digunakan, sebelum memilih silahkan lihat Demo DISINI.
Untuk Pilihan CSS, sobat bisa lihat ambil DISINI.

Cara Penggunaan

Untuk menggunakan Highlight.js ini, lebih mudah daripada PRISM, kita tidak perlu menentukan bahasanya, sobat tinggal tulis seperti ini :

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

Selamat mencoba dan semoga bermanpaat