Menambahkan Syntax Highlighter di Blogger dengan Prism

Bagi anda yang menggunakan Wordpress pasti sudah tidak asing dengan Crayon Syntax Highlighter. Plugin tersebut digunakan untuk membuat source code yang anda tulis menjadi berwarna warni (highlight) sesuai dengan bahasa pemrograman yang anda gunakan. Namun untuk anda yang menggunakan blogger plugin tersebut tidak tersedia.

Saya sudah mencoba mencari cara memasang Crayon Syntax Highlighter ini pada blogger dan kendala yang saya temukan adalah tidak compatible dengan https yang saya gunakan. Akhirnya saya mencari cara lain memasang syntax highlighter ini dan menemukan prism.js yang dapat diimplementasikan dengan mudah di blogger. Menurut saya pribadi hasil dari prism ini tidak sebaik dari Crayon Syntax Highlghter di Wordpress namun saya sudah cukup puas dengan tampilannya.

Berikut ini adalah cara bagaimana memasang Prism Syntaxt Highlighter pada blogger:

Edit Theme

Buka halaman admin blogger anda, pilih menu theme dan pilih Edit HTML. Kemudian cari lah kata "</style>" dan tambahkan baris kode berikut diatasnya.

/* CSS Prism Syntax Highlighter */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;position:relative;border-radius:4px;max-height:500px}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold}
pre::after{content:'Double click to selection';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out}
pre:hover::after{opacity:0;top:-8px;visibility:visible}
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px}
pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold}
code .token.punctuation{color:#ccc}
pre code .token.punctuation{color:#fafafa}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777}
code .namespace{opacity:.8}
code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56}
code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad}
pre code .token.selector,pre code .token.attr-name{color:#fafafa}
pre code .token.string{color:#40ee46}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc}
code .token.operator{color:#1887dd}
code .token.atrule,code .token.attr-value{color:#009999}
pre code .token.atrule,pre code .token.attr-value{color:#1baeb0}
code .token.keyword{color:#e13200;font-style:italic}
code .token.comment{font-style:italic}
code .token.regex{color:#ccc}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
.comments pre{padding:10px 10px 15px 10px;background:#2c323c}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none}
.comments pre::after{font-size:11px}
.comments pre code{color:#eee}
.comments pre.line-numbers{padding-left:10px}
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber}
pre.line-numbers > code{position:relative}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms}
pre[data-codetype='CSSku']:before{background-color:#00a1d6}
pre[data-codetype='HTMLku']:before{background-color:#3cc888}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0}
pre[data-codetype='JQueryku']:before{background-color:#e5b460}

Setelah menambahkan kode CSS diatas langkah berikutnya adalah menambahkan script di bawah ini.

<script src="https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/prisma.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(&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>

Letakkan baris script di atas sebelum tag </head>. Kemudian simpan theme tersebut dan lakukan langkah berikutnya.

Cara Penulisan Kode

Dengan menambahkan barisan kode di atas, blogger anda sudah mampu untuk membuat syntax highlighter. Untuk membuat post dengan syntax highlighter ini, anda harus menuliskan kode anda pada tab HTML bukan pada tab Compose seperti biasanya. Cara penulisan kode dapat dilihat melalui kode di bawah ini

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery ... </code></pre>

Untuk penulisan kode tersebut gunakan format escape string. Saya sendiri menggunakan web https://www.freeformatter.com/html-escape.html ini untuk melakukan escape string kode. Contoh hasil lengkapnya dapat anda lihat pada halaman https://codepen.io/arlinadesign/full/XJvrJR ini.

Demikianlan artikel Menambahkan Syntax Highlighter di Blogger dengan Prism ini. Untuk penulisan syntax highlighter ini sendiri sudah saya terapkan pada blog saya ini setelah sebelumnya saya hanya menggunakan format bold untuk penulisan kode. Semoga artikel berikut ini dapat membantu anda dan selamat mencoba.