Cara Membuat SyntaxHighlighter

Syntax HighLighter | Pada kesempatan kali ini saya akan membagikan cara untuk membuat Syntax Highlighter.

Syntax Highlighter merupakan Script yang merubah kode teks menjadi berwarna warni.

Untuk membuat SyntaxHighlighter ini membutuhkan kode pre bukan blockquote , karena saya sering melihat kode script pada blog-blog tutorial lainnya yang menggunakan  blockquote bukan  pre.

Berikut Tutorialnya

Langkah 1 : Simpan CSS diatas </b:skin> / </style>

/* Syntax Hightler */
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#3F3F3F;border-left:4px solid #40627E;font-size:13px;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;border-radius:3px;overflow:auto}
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}
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 pre{margin-bottom:-15px}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre mark{background-color:#1a5752;color:#a3a483}
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}
pre mark{background-color:#fff;color:#809FFE !important;font-weight:normal;padding:3px;border-radius:2px}
pre:after{content:"Double click to 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}

Langkah 2 : Simpan JavaScript diatas </body> [ Script Double Click ]

<script type='text/javascript'>
// JS Double Click
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>

 Untuk yang ingin script double click pada komentar, tambahkan script dibawah ini.

<script type='text/javascript'>
// JS Double Click pada komentar
var pres = document.getElementsByTagName(&quot;i[rel=&quot;pre&quot;]&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>

Langkah 3 : Simpan JavaScript diatas </body> [ agar dapat digunakan di komentar ]

<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>

Langkah 4 : Simpan Script diatas </head>

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

Cara Pemasangan

<pre><code>...........................</code></pre>

Ganti [....] dengan kode sobat.
Mungkin, cukup sekian yang dapat saya sampaikan..
Tunggu tutorial-tutorial selanjutnya