Cara Membuat Syntax Highlighting Pada Blog

RudiEtnovian.Com - Syntax Highlighting ini biasanya digunakan untuk membungkus kode yang di posting pada sebuah halaman posting pada blog.

Biasanya sering digunakan pada blog yang memuat tutorial desain blog dan sebagainya.

Nah kali ini saya akan berbagi bagaimana cara membuat syntax highlighting tersebut seprti yang ada pada blog ini.

Syntax Highlighting ini meskipun simpel tapi tampilannya menarik, karena syntax highlighting ini lengkapi dengan style warna pada masing-masing kode dan yang paling penting adalah syntax highlighting ini sudah di defer untuk menghindari blocking render js.

Berikut Cara Membuat Syntax Highlighting With Defering Js Pada Blog tersebut.

1. Tambahkan script di bawah ini di atas kode </body>

<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://yourjavascript.com/55865111047/syntaxhighlightingdeferjs.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

2. Lalu cari lagi kode </head> dan letakkan kode CSS di bawah ini tepat di atas kode tersebut.

<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{-moz-user-select:none;display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre[data-codetype="indahCSS"]:before,pre[data-codetype="indahHTML"]:before,pre[data-codetype="indahJS"]:before,pre[data-codetype="indahJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
</style>

3. Simpan hasil editing template tersebut. Sekarang kita masuk ke penggunaan kode-kode tersebut di halaman postingan.

4. Masuk ke halaman postingan yang akan dipasang syntax highlighting with defer js, buka dalam mode HTML dan masukan kode pemanggilnya seperti di bawah ini.

Kode Pembungkus HTML
<pre data-codetype="indahHTML" title="HTML">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus CSS
<pre data-codetype="indahCSS" title="CSS">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus Javascript
<pre data-codetype="indahJS" title="Javascript">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus jQuery
<pre data-codetype="indahJQ" title="JQuery">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>

Apabila ingin memposting kode JQuery agar bisa muncul di halaman postingan sebelum dimasukan ke dalam kode pemanggil di atas, kode JQuery tersebut harus diparse atau dikonversi terlebih dahulu.

Untuk melakukan parse atau konversi kode HTML silahkan gunakan Tool Parse HTML disini.

Demikianlahtutorial blog singkat mengenai Cara Membuat Syntax Highlighting Pada Blog tersebut.

Semoga bisa memberikan manfaat untuk kita bersama.