Cara membuat dan Memasang Kode Pre (syntax highlighter) pada Blog

Sobat blooger kali ini saya akan berbagi tutorial membahas cara membuat dan memasang kode pre (syntax highlighter) pada blog. Kode pre ini pasti sering kita jumpai pada blog-blog yang didalam artikel-artikelnya membahas tentang kode script, baik itu CSS, HTML, PHP, JavaScript dan sebagainya.

Kalau saya searching menggunakan kata kunci diatas, memang banyak sudah yang membahasnya namun kalau saya cermati pembahasannya hanya sebatas sampai kode pre itu dipasang di blog saja dan tidak sampai membahas sampai merubah warna syntax (syntax highlighter) secara otomatis yang sebelunnya kita 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 bantuan pemanggilan script style CSS dan JavaScript.
Bagi anda yang memang masih bingung dalam pemasangan Syntax Highlighter, maka disini saya akan bantu langkah demi langkah tahapan pemasangannya sehingga mudah dipahami.

Lagi-lagi bagi anda yang masih pemula saya selalu mengingatkan sebelum melakukan perubahan terhadap template anda ada baiknya backup terlebih dahulu template blog anda. Selanjutnya apabila terjadi hal-hal diluar kendali anda yang mengakibatkan rusak/ amburadulnya tampilan blog maka anda tinggal me-restore template yang sudah dibackup sebelumnya.

Langkah #1 : Awal yang anda lakukan adalah login ke akun blogger anda dan masuk ke template lalu pilih edit HTML.

Langkah #2 : copy kode dibawah ini persis 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;
}

Langkah #3 : copy kode dibawah ini diatas kode </head>

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

Langkah #4 : copy 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>

Info!
Fungsi dari kode diatas adalah select all apabila double click pada area script yang akan diseleksi.

Langkah #5 : Save template anda.

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

Lalu kenapa harus di parse?
Nah fungsi dari kita melakukan parse agar kumpulan script atau code tidak aktif sehingga tidak munculnya error dan apabila dilakukan parse maka kode/script akan berubah menjadi kode unik (entitas) yang apabila diterapkan pada artikel ini kode-kode tersebut dibaca sebagai text biasa yang tidak memiliki nilai eksekusi script. Untuk melakukan parsing script silahkan rujuk ke tautan parse ini

CONTOH :
Script/code pada langkah-langkah diatas adalah merupakan contoh aplikasi memasang kode pre (sysntax highlighter).

Bila masih ada yang mengalami kendala, silahkan kita diskusikan melalui kotak komentar. Terima kasih.