Cara Membuat Syntax Highlighter (Kotak Script)

Author : Oktavialei

Dalam kesempatan  kali ini saya akan memberikan sbuah tutorial tentang cara menambahkan Syntax Highlighter untuk blogger. sebelum memulai mungkin dari sobat ada yang tau tentang apa itu syntax? menurut saya syntak itu adalah kode yang ditulis dalam bentuk tertentu dengan menggunakan kata-kata reserved yang memiliki arti yang telah ditetapkan.

Penjelasan lain juga bahwa Syntax Highlighter itu adalah alat Javascript untuk menampilkan terutama kode sumber dalam berbagai warna dan font yang berbeda sesuai dengan kategori terms.Syntax Highlighter adalah Plugin yang sangat berguna bagi blogger yang menulis artikel tentang pemrograman dan kode seperti Java, Css, Html, Python etc. itu bisa membuat seperti terlihat asli dan profesional untuk pengunjung pada blog.

bagi sobat yang ingin memasang syntax untuk blog sobat, silahkan ikuti tutorialnya.

Tutorial Cara Membuat Syntax Highliter :

• Buka akun blogger.
• Pilih menu Template klik Edite HTML
• Silahkan cari kode </b:skin> , gunakan CTRL+F untuk memudahkan.
• Kalo sudah ketemu copy kode di bawah ini dan letakan tepat di atas kode </b:skin>

/* Syntax Highlighter */

pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;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;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
pre.line-number{background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFya2E40m9ws4SWgtAAM6SUzIO2ltnbr43g443W0gelpavjuiVT0ham7xTRe1crsyyVFB1e6zqPayzTe4lxNKjygmVVmExERp0OOjM6LcYUvZpndTLGAZbDgB6IjP8u-SodR79nutdxAY/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
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}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
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:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

• Selanjutnya cari kode </head>  , gunakan CTRL+F untuk memudahkan.
• Kalo sudah ketemu copy kode di bawah ini dan letakan tepat di atas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

• Klik simpan Template

Cara Menggunakan, pada saat membuat post pilih mode HTML, taruh kode script di bawah di mode html. dan kembali ke menu compose, taruh script yang mau di gunakan dalam modecompose

<pre><code>...Masukan Kode...</code></pre>

Itulah tutorial Cara Membuat Syntax Highlighter (Kotak Script)