Cara Membuat Syntax Highlighter di Blog

Kode pre ini pasti sudah Anda sering jumpai pada blog-blog yang didalam artikel atau postingannya membahas tentang kode script, baik itu CSS, HTML, PHP, JAVASCRIPT dan sebagainya.

Kalau saya search di pencarian google menggunakan kata kunci diatas, namun kalau saya lihat memang banyak sudah yang membahasnya namun hanya sebatas kode pre itu di pasang pada blog saja dan tidak sampai membahas sampai merubah warna syntax secara otomatis yang sebelumnya Anda inginkan.

Apa Itu Syntax Highlighter

Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni. Dimana warna-warni tersebut kita buat dengan pemanggilan script style CSS dan JavaScript.

Bagi Anda yang ingin mencoba dan menggunakannya syntax highlighter ini di blog, disini saya akan menjelaskan langkah-langkah tahapan dan pemasangannya sehingga lebih mudah dipahami.

Bagi Anda yang masih pemula saya selalu mengingatkan sebelum melakukan perubahan terhadap template Anda, ada baiknya backup terlebih dahulu template blog Anda.

1. Login ke akun blogger Anda dan masuk ke template lalu pilih edit HTML.

2. Copy kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#f1f1f1;
font-size:12px;
clear:both;
border-left:15px solid #ccc;
border-right:1px solid #ccc;
color:#999;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:15px;
color:#ff3c00;
font-size:13.5px;
}
pre code {
display: block; padding: 0.5em;
color: #555;
}
#comments pre code {
padding: 0 !mportant;
color: #555;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: slategray;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #0077aa;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #990055;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #669900;
}
pre .attribute {
color: #588400;
}
pre .rules .value{
color: #333;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #a0733f;
}
pre .deletion {
color: #905;
}
pre .tex .formula {
background: #073642;
}

3. Salin kode dibawah ini tepat diatas kode </head>

<script src="https://raw.githack.com/hanyapedia/hanyapedia/master/highlight-pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

4. Salin kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Fungsi dari kode diatas adalah select all apabila double click pada area script yang akan di seleksi.

5. Save template Anda.

Untuk penerapan syntax code-nya, maka scriptnya haruslah diantara <pre><code> dan </code></pre>. Dan perlu diingat script yang akan ditampilkan harus di parse terlebih dahulu.

Fungsi dari kita melakukan parse agar kumpulan script atau kode tidak aktif tidak terjadi error dan apabila dilakukan parse maka kode akan berubah menjadi kode unik (entitas) yang apabila diterapkan pada artikel ini kode-kode tersebut dibaca sebagai teks biasa yang tidak memiliki nilai eksekusi script. Untuk parse disini.