Langkah memasang Syntax Highlighter di Blog

- September 21, 2014

infoalya.com



Syntax Highlighter sudah cukup banyak tersebar di internet dan banyak digunakan untuk meletakkan script pada postingan, untuk pengertian Syntax Highlighter anda dapat menggeledah rumahnya mbah google. 
Masuk ke akun anda ~ template ~ edit HTML
Copy dan paste JavaScript dibawah ini tepat diatas tag </head>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
Temukan ]]></b:skin> atau </style>
Copy dan paste CSS berikut tepat diatasnya
Simpan template jika selesai 

/* 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(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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}
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}
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}

Penggunaan Syntax Highlighter pada postingan

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

Untuk menambahkan fungsi double click pada Syntax Highlighter dapat menggunakan kode dibawah ini
<script type='text/javascript'>

var pres = document.getElementsByTagName(&quot;blockquote&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>

Ganti blockquote dengan pre, jika ingin menggunakan satu klik maka rubah dblclick menjadi click
Special thanks untuk sang inspirator :

Kang Ismet http://blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html
Kang Adhy http://www.kompiajaib.com/2014/11/merubah-blockquote-tag-menjadi-pre-code.html
Mas Ficripebriyana http://www.ficripebriyana.com/2014/06/cara-membuat-syntax-highlighter-di-blog.html

Share this with short URL:
Blogger
Disqus
Tinggalkan Komentar

No comments

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

 

ketik dan enter untuk mencari