Cara Memasang Prism Syntax Highlighter pada Blogger - Syntax Highlighter merupakan salah satu fitur dan pendukung pada blog yang dibuat untuk mempermudah pembaca dalam memahami isi konten atau artikel.
Syntax highlighter biasanya banyak digunakann pada web atau blog yang bertemakan tutorial khususnya tentang dunia web, blog dan pemrograman.
Dengan Syntax Highlighter, penulis dapat memasukkan sebuah kode HTML, Java script atau jQuery kedalam postingan artikel dengan susunan kode yang rapi dan terstruktur sehingga dapat mudah memahami oleh pembaca.
Pengunjung akan merasa nyaman dalam membaca dan artikel Anda akan terlihat lebih professional.
Cara memasang Prism Syntax Highlighter di Blogger
Langkah Pertama
Masuk ke Blogger > Tema > Edit HTML
Langkah Kedua
Salin kode di bawah ini, kemudian letakkan sebelum kode </style>. Gunakan gunakan CTRL + F untuk mempermudah pencarian.
/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}
Langkah Ketiga
Salin kode di bawah ini, kemudian letakkan sebelum kode </body> atau </head>.
Gunakan gunakan CTRL + F untuk mempermudah pencarian.
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
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>
Langkah Keempat Simpan Tema / Template Sampai disini kita sudah sukses memasang prism syntax highlighter pada blogger.
Selanjutnya, untuk menggunakan highlighter tersebut pada postingan, kita harus memasukan kode panggil di bawah ini dengan cara memasukkannya ke dalam postingan Tab HTML.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>
Kode HTML, CSS atau JavaScript yang akan diposting harus di parse terlebih dahulu. Untuk mem-parse kode HTM CSS atau JavaScript silahkan gunakan Parse Tools.
Sekian dan semoga bermanfaat. Sumber: arlinadzgn.com.