Cara Membuat Kode Berwarna dalam Tag Pre - Syntax Highlighter

Membuat text/script berwarna atau yang disebut dengan SYNTAX HIGHLIGHTER biasanya digunakan oleh blogger yang berkaitan dengan source kode dan bahasa-bahasa pemrograman seperti HTML, Javascript, CSS, JSON, SQL, Apache, C++, dll. Terkadang juga kita akan mendapatinya di blog-blog tutorial seperti blog DesainKode ini. Tujuan pewarnaan kode/script ini adalah selain memberikan tampilan yang elegan juga bertujuan untuk membedakan yang mana kode CSS, JS, HTML, XML, PHP, Tag pembuka atau penutup, String, Title, dan lainnya.

Ada beberapa jenis Syntax Highlighter yaitu Highlight.js, PRISM, GeSHi, Google Code Prettify, SHJS. Namun yang akan saya bahas disini adalah jenis Highlight.js, karena jenis ini lebih mudah penggunaannya dan paling banyak digunakan oleh blogger-blogger Indonesia. Pengaplikasiannya digunakan dalam Tag PRE (pre-formatted). Beda dengan Blackquote (kutipan), Tag Pre memang lebih cocok di pakai dalam menuliskan script/kode, selain itu juga mendukung Syntax Highlighter ini. Sudah banyak style/tema Highlight.js yang telah dibuat sampai saat ini, dan kurang lebih sudah mengenali 120 bahasa pemrograman. untuk lebih lengkapnya nanti bisa dilihat dibagian Style CSS Highlight.js artikel ini.

Langsung saja, untuk membuatnya silahkan ikuti langkah-langkah berikut :
1. Simpan kode Javascript ini diatas </head>

<script src='http://cdn.rawgit.com/editorkode/live/master/highlight.pack.js'/>
<script>hljs.initHighlightingOnLoad();</script>

2. Pilih salah satu Style dari CSS yang ada di bawah lalu taruh di atas ]]><b:skin>. Ini contoh kode CSS Highlight yang dipakai oleh Blog DesainKode saat artikel ini dibuat.

pre code {
    display: block; 
    padding: 10px; 
    background:#141510;
    color: #DCCF8F;
    font-size:85%;
    margin-top: 5px;
    overflow-wrap: break-word; 
    overflow: auto; 
    overflow-x:hidden;
    border-left: 5px solid #9A3135;
}
 
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

66 Jenis Style/Tema Syntax Highlighter

Kode-kode CSS dibawah sudah termasuk bahasa pemrograman yang biasa digunakan blogger dalam membuat kode tutorialnya (CSS, JS, HTML). Silahkan klik tombol di bawah untuk melihat demonya terlebih dahulu.

• Default
• Agate
• Androidstudio
• Arduino Light
• Arta
• Ascetic
• Atelier Cave Dark
• Atelier Cave Light
• Atelier Dune Dark
• Atelier Dune Light
• Atelier Estuary Dark
• Atelier Estuary Light
• Atelier Forest Dark
• Atelier Forest Light
• Atelier Heath Dark
• Atelier Heath Light
• Atelier Lakeside Dark
• Atelier Lakeside Light
• Atelier Plateau Dark
• Atelier Plateau Light
• Atelier Savanna Dark
• Atelier Savanna Light
• Atelier Seaside Dark
• Atelier Seaside Light
• Atelier Sulphurpool Dark
• Atelier Sulphurpool Light
• Brown Paper
• Codepen Embed
• Color Brewer
• Dark
• Darkula
• Docco
• Far
• Foundation
• Github Gist
• Github
• Googlecode
• Grayscale
• Hopscotch
• Hybrid
• Idea
• Ir Black
• Kimbie Dark
• Kimbie Light
• Magula
• Mono Blue
• Monokai Sublime
• Monokai
• Obsidian
• Paraiso Dark
• Paraiso Light
• Pojoaque
• Railscasts
• Rainbow
• School Book
• Solarized Dark
• Solarized Light
• Sunburst
• Tomorrow Night Blue
• Tomorrow Night Bright
• Tomorrow Night Eighties
• Tomorrow Night
• Tomorrow
• Vs
• Xcode
• Zenburn

Semuanya style diatas sudah saya edit ulang, jadi klo mau digunakan, kodenya tinggal di copy saja. Itupun kalau masih ingin mengatur sedikit tata letaknya, silahkan diedit bagian pre code {...}
Note : Kalo punya style sendiri, silahkan hubungi saya untuk ditambahkan ke daftar list diatas.

3. Berikut ini cara penggunaannya, saat ingin membuat Kode/Script dalam postingan blog (dalam Mode HTML):

<pre><code> ---LETAKKAN DISINI KODE CSS, HTML, JS, JQUERY, dll--- </code></pre>

Sekian tutorial untuk membuat pewarnaan source kode, script atau bahasa-bahasa pemrograman dalam Tag Pre. Untuk menambahkah nama/judul pada tag pre tersebut, baca artikel tentang cara Membuat Judul Tag Pre Code ini. Silahkan subcribe di bagian footer blog ini untuk berlangganan artikel DesainKode. Masukkan alamat Email anda untuk saya kirimi artikel blog ini secara Gratis.