Cara Mudah Memasang Syntax Highlighter di Blog Dengan Mudah

Syntax Highlighter adalah sebuah fitur yang dapat menampilkan teks,terutama kode/script,jika Blog kalian berisi tentang Tutorial Blog / yang berkaitan dengan Script,saya sarankan kalian memasang Syntax Highlighter pada Blog kalian..

Syntax Highlighter berfungsi untuk memberi warna kepeda setiap kode yang akan ditampilkan,jadi akan lebih memudahkan pengunjung untuk membedakan kode kode tersebut

Seperti diataslah tampak Syntax Highlighter yang telah terpasang di blog,sangat menarik bukan ?
Mari langsung kita ke Cara Pemasangan

<!– adsense –>
1.Buka Blogger
2.Masuk ke Template -> Edit HTML
3.Setelah itu cari kode ]]></b:skin>
4.Copy Kode dibawah ini dan Pastekan tepat diatas 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/AVvXsEg3sK9rf8qfEFnGBaok1Nl2sbFZXIFhE7W7laV-Vhd_huP0nQUJDA0XfZxZX5aRhsDtaK7kIPAzThadXwGj6Oyi4KFuPQ-uYJFnFT04DKakDpxudqvXCMIg0_KgVKzhRxOA-4D4qEaeumk/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}
pre:after{content:"Double click Untuk Copy";float:left;padding:2px 10px;width:auto;height:auto;font:11px/20px "Consolas",Arial,"Helvetica Neue","Lucida Grande",sans-serif;position:absolute;right:0;top:0;transition:opacity 0.2s ease-in-out;color:#FDFDFD;border-radius:2px;background-color:rgba(161,164,165,0.61)}
pre:hover::after{opacity:0;visibility:visible}
pre .tex .formula{background:#073642}

5.Setelah itu cari kode </head>
6.Pastekan lagi kode dibawah ini,tepat diatas kode </head>

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

7.Pastekan kode terakhir dibawah ini,tepat diatas kode </body>

<script type='text/javascript'>
// JavaScript DobelClick SH dee0ns
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Setelah itu klik Simpan Template

Setelah itu untuk menerapkan di postingan kalian harus memasukan kode

<pre><code>Masukan Script/kode kalian</code></pre>

Setelah itu kalian bisa ganti Masukan script/kode kalian dengan kode/teks yang kalian inginkan

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda