Tutorial Membuat Syntax Highlighter Dalam Artikel

Apa itu Syntax Highlighter?

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks khususnya adalah Source Code dalam berbagai warna, font sesuai dengan istlah kategori.

Fitur Syntax Highlighter ini juga memudahkan para penggunanya pada saat menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup.Contohnya seperti:

HTML , CSS , JAVASCRIPT , PHP , dll.

Bagaimana cara membuat Syntax Highlighter?

-Masuk ke Theme > Edit HTML > CTRL+F (Pada Windows) Command+F (Pada Mac) cari </head>

-Copy dan Paste kode dibawah ini tepat di atas </head>

<style>

/*Syntax Highlighter*/

pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}

code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}

pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}

pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}

pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}

pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}

pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}

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:#000;font-weight:bold}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#eee8d5}

</style>

-Kemudian cari lagi dengan CTRL+F (Pada Windows) Command+F (Pada Mac) kode </body>

-Copy dan paste kode dibawah ini tepat di atas </body>

<script type="text/javascript">

//<![CDATA[

function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://www.erllang.ga/js/syntax-highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

-Silahkan Save Theme

-Untuk menggunakan Syntax Highlighter pada artikel kalian,silahkan tambahkan kode dibawah ini di dalam Post HTML kalian tepat di kode yang mau kalian highlight

<pre><code>

Silahkan masukkan code HTML kalian disini

</pre></code>

Done,silahkan kalian liat hasilnya