Cara Membuat dan Memasang Syntax Highlighter Otomatis di Blog

Syntax Highlighter akan memberi warna pada komponen-komponen kode sehingga membuatnya nyaman dilihat dan lebih mudah dipahami.


Syntax Highlighter yang ada di atas adalah buah karya dari Alex Gorbatchev. Kode ini juga kerap dikenal sebagai Script Stabilo Syntax yang fungsinya mirip dengan Blockquote.


Saya mendapatkan Syntax Highlighter ini dari blog Bung Frangki yang sudah terkenal di jajaran suhu blogger. Tanpa berlama-lama, mari kita coba memasang Syntax Highlighter dari Bung Frangki ini..


Cara Memasang Syntax Highlighter di Blogspot

Pertama. Login ke akun Blogger anda, kemudian masuk ke Dahsboard.

Kedua. Pilih Theme, kemudian Edit HTML.

Ketiga. Letakkan Kode di bawah ini di atas kode </style> atau ]]></b:skin>

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


Keempat. Copy kode di bawah ini, letakkan di atas kode  </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>


Kelima. Simpan Template Anda.

Artikel Terkait