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 HTMLCopy dan paste JavaScript dibawah ini tepat diatas tag
</head>
<script src='<script src="https://cdn.jsdelivr.net/gh/samhidayat/infoalyajs@640db345e83b0fa26e93004246eacfe96c563fb7/highlight.pack.js" type="text/javascript"></script>'/> <script> hljs.initHighlightingOnLoad(); </script>Temukan
]]></b:skin>
atau </style>
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDY4yeABYhqwlAlH2soaslDXNATFAs89a4EkoyXUdnH_ZdHig8naKacVIcWvDujxckpjkTmMQBPBzoIdTHB-tBX-wUAkrsNQvoMnZIDUP_9tEHjoeBJlGNA5Tk3Kpq-aUw8CFhkrUPfI/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("blockquote"); 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>
Ganti blockquote dengan pre, jika ingin menggunakan satu klik maka rubah dblclick menjadi click
Special thanks untuk sang inspirator :
Kang Ismet _blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html_
Kang Adhy _kompiajaib.com/2014/11/merubah-blockquote-tag-menjadi-pre-code.html_
Mas Ficripebriyana _ficripebriyana.com/2014/06/cara-membuat-syntax-highlighter-di-blog.html_