Cara Memasang Syntax Highlighter Pada Blog

How to Install Syntax Highlighter In Blog : Syntax Highlighter tidak bisa dipisahkan oleh para Blog Tutorial dimana hampir sebagian besar blog tutorial menggunakan Syntax untuk menyesipkan kode script untuk mempermudah pengunjung untuk memahaminya. Syntax Highlighter terdiri dari dua suku kata yaitu Syntax (identitas-deskripsi code) dan Highlighter (Penanda - Pembeda), dalam pengertian  secara umum Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks terutama source code dalam berbagai warna dan font sesuai dengan kategori atau istilah. Dengan menggunakan Syntax Highlighter agar mempermudah dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman atau bahasa markup.

Tutorial ini sebenarnya sudah banyak bertaburan di google dan saya mencoba kembali untuk membahasnya diartikel ini, siapa tahu saja ada yang belum memasangnya pada blog dan secara kebetulan kesasar disini, jadi saya rasa tidak apalah saya bahas kembali.

Oke, jika Anda tertarik ikuti tutorial di bawah ini:

1. Simpan CSS ini di atas ]]></b:skin> atau </style>

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/AVvXsEghubVFIcXkjjQ58zTkl0StdnaebC7GNiJV_6AHxuj7mBhoPO0lONhP_UFAiyYou5lsRzBEJCAp72DkgeXO_K4U_bPRYWzHiglSNx2JOcj9-cIblEn-ZASmuEVX9b1ino47zz2FeP2rOhk/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: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
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: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;}

2. Selanjutnya Simpan kode di bawah ini tepat diatas </head>

<script src='https://googledrive.com/host/0B1-0l4x7DNi0YWxVdmxfbE1BX0U' type='text/javascript'/>
hljs.initHighlightingOnLoad();
</script>

3. Namun jika ingin mengaktifkan Syntax Highlighter di dalam komentar silahkan simpan kode berikut diatas </body>

<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>

4. Untuk Menggunakannya silahkan lihat kode pemanggilnya di bawah ini dan paste pada halaman HTML bukan Compose sedangkan untuk memasukkan script kembali ke halaman Compose dan masukkan scriptnya didalam kode pemanggil di bawah.

<pre><code>...Kode Javascript, CSS, HTML, XML...</code></pre>

5. Terakhir, silahkan berkarya