Membuat Sintax Highlighter Otomatis Pada Blog

Sebuah kode tertentu seharusnya memiliki sebuah space area tertentu juga karena biasanya tempat itu dijadikan sebauh kode untuk beberapa bagian element. Pada kesempatan kali ini saya akan memberikan cara bagaimana Membuat Sintax Highlighter Otomatis Pada Blog. Jadi anda tidak perlu repot-repot lagi mencari script highlighter nya di github karena sudah dibungkus di syntax otomatis ini.

Sudah banyak sekali blogger atau website yang menggunakan syntax highlighter ini karena dimana ini membuat pengunjung tidak bingung saat membaca tutorial ditambah dengan membuat tampilan rapih mana kode mana teks artikel biasa dan membuat tampilan lebih nyaman lagi ketika dipandang.

Cara Membuat Sintax Highlighter Otomatis Pada Blog sebagai berikut.

Pertama anda masuk ke halaman dashboard blogger anda

Kemudian pilih Tema-Edit HTML (Tapi untuk menjaga kecelakaan saat pengeditan tema sebaiknya anda untuk membackup template anda terlebih dahulu)

Lalu masukan kode dibawah tepat diatas ]]></b:skin>

/* syntax highlighter Otomatis by Marwanzaen */
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}

Setelah tersimpan masuka lagi kode 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>

Lalu anda klik Simpan.
Lihat hasilnya dengan membuat artikel dengan menggunakan kode dibawah ini

<pre><code> Masukan scriptnya disini </code></pre>

Jadi setiap kali anda posting artikel tentang yang ada kaitannya dengan kode atau script sebaiknya masukan cara kode diatas pada postingan anda dan disimpan pada menu HTML bukan di COMPOSE ya.

Selamat mencoba dan berkreasi
Ohya terima kasih kepada Bung Frangki yang sudah membuatkan Js nya :) 

Terima kasih anda telah membaca artikel Membuat Sintax Highlighter Otomatis Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: