Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.
Untuk mengaktifkan fitur ini dibutuhkan javascript yang dapat ditempatkan pada code HTML Template Blog. Pada postingan kali ini, saya ingin share cara membuat syntaxhighlighter, menggunakan Highlight.js dari Softwaremaniacs.
Caranya: copy dulu kode javascript di bawah ini atau lebih aman download disini.
Langkah 1 : Menyimpan JavaScript
Simpan JavaScript ini di atas </head> dalam tamplate blog.
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>Langkah 2 : Pilih CSS
Code CSS dalam hal ini, berfungsi menampilkan style SyntaxHighlighter dimaksud.
Ada banyak pilihan CSS yang bisa digunakan, sebelum anda memilih, terlebih dahulu dapat melihat-lihat demo DISINI.
Untuk Pilihan CSS, anda bisa download DISINI.
Atau salah satu contoh Default CSS SyntaxHighlighter:
/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
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;
}
Langkah 3 : Simpan CSS tersebut di atas ]]></b:skin>
Langkah 4 : Cara Penggunaan
Untuk menggunakan Highlight.js ini, sangat simple, kita tidak perlu menentukan bahasanya, anda tinggal tulis seperti ini :
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>
