Cara Membuat Syntax Highlighter Di Blog

Cara Membuat Syntax Highlighter Di Blog - Syntax Highlighter merupakan fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari Syntax Highlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Syntax Highlighter yang akan ane share ini merupakan hasil codingan dari Alex Gorbatchev yang kodenya dikenal dengan nama Stabilo Syntacs. Syntax Highlighter juga dapat digunakan sebagai pengganti Blockquote.

Oke langsung saja, ane akan membagikan Cara Membuat Syntax Highlighter Di Blog, pastikan kamu mengikuti langkah-langkah ini dengan benar.

Cara Membuat Syntax Highlighter Di Blog

1. Masuk ke Dashboard Blog kamu yang ingin dipasang Syntax Highlighter.
2. Pilih opsi Template > Edit HTML
3. Tempelkan kode Syntax Highlighter dibawah ini tepat diatas </style> atau </b:skin>

/*Syntax Highlighter Membuat HidupMu Lebih Berwarna*/
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}

4. Cari kode </body>, lalu tempelkan kode Syntax Highlighter dibawah ini tepat diatas </body>

<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/bungfrangki/highlight/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

5. Silahkan Save Template.

Cara Menggunakan Syntax Highlighter Di Blog

Untuk cara menggunakan Syntax Highlighter cukup mudah, kamu bisa memanggil Syntax Highlighter dengan cara memasukkan format kode berikut ke kolom HTML yang ada di postingan.

<pre><code> 

Silahkan masukkan code HTML, JS, JQuery, CSS disini

</pre></code>

Nah itu tadi Cara Membuat Syntax Highlighter Di Blog, tentunya sangat mudah untuk menerapkannya di blog.

Demikian artikel tentang Cara Membuat Syntax Highlighter Di Blog, semoga bermanfaat, jangan lupa untuk Like Fanspage Facebook, Share dan Komen.