[Tutorial] Cara Membuat Syntax Highlighter di Postingan Blog + Bonus

GIBZET0407 - 12:48 PM

Oke Pada Postingan Saya akan membuat colom untuk Mengcopy Script Yang Sering di sebut Syntax Highlighter

Oke Kita Langsung Saja Ya !!

1.Pertama
Login Ke Bloggspot > Pilih Blog > Template

2.Kedua
Edit HTML > Copy Kode Berikut


/* 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/AVvXsEjdCmzaY0kiHRyj1_uvOF5zDOyrSahlF36KcZ7Xjl1qaLgaeGbp0PbaX_3AAxsX1ngYnuR2Sppyxln0xRohgQhc8cRqMOqtLVPgM16AsUO8T27cFj4qyaDRADyv3hcnHp8MldJsVBlxv00/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}

3.Ketiga
Lalu Pastekan Kode di Atas Tepat Di atas Kode ]]></b:skin> , Untuk Mencari ]]></b:skin> Dapat dengan cara Menekan Tombol Ctrl+F Lalu Akan ada Search Box Di Samping Kanan Atas

4.Keempat
Copy Kode Berikut :


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

5.Kelima
Pastekan Kode di atas Tepat Di Atas Kode </head> Untuk mencari Kode </head> Dapat Dengan Cara Yang Ke Tiga

6.Keenam
Simpan Template

Untuk Menggunakan Syntax Highlighter di Postingan
Dapat Dengan cara Modus HTML Dengan Kode



<pre><code>

Isi Html / CSS / Javascript Kamu

</code></pre>

Selamat Mencoba !!

Bonus
[Tutorial] Cara Buat Double Click Buat Select All Untuk Tempat Copy Kode

Oke Langsung Saja

Copy Kode Berikut


<script type='text/javascript'>

//<![CDATA[

var pres = document.querySelectorAll('pre,code');

for (var i = 0; i < pres.length; i++) {

  pres[i].addEventListener("dblclick", function () {

    var selection = getSelection();

    var range = document.createRange();

    range.selectNodeContents(this);

    selection.removeAllRanges();

    selection.addRange(range);

  }, false);

}

//]]>
</script>