Cara Membuat Prism Syntax Highlighter Di Blog

Hai, kali ini saya akan share Cara Membuat Prism Syntax Highlighter Di Blog

Apa Itu Prism Syntax Highlighter?

Prism Syntax Highlighter disingkat PSH adalah sebuah kolom atau box yang di gunakan untuk menaruh kode-kode pemrograman seperti HTML, CSS, JAVASCRIPT, QUERY, Dll.

Dengan adanya prism syntax ini tulisan atau text artikel tidak tercampur dengan struktur kode. Pengunjung juga akan terasa nyaman, karena pengunjung bisa tahu perbedaan antara text dengan struktur kode.

Sebenarnya menampilkan kode didalam artikel tanpa menggunakan Prism Syntax itu bisa, tapi border frame ini berperan penting untuk mendapatkan performa pada tampilan blog agar terlihat menarik dan keren.

Kalau kamu tertarik untuk pasang Prism Syntax Highlighter, silahkan kamu ikuti caranya dibawah ini.

Cara Membuat Prism Syntax Highlighter Di Blog

Berikut langkah-langkahnya:
1. Login ke Blogger lalu buka menu Tema lalu klik Edit HTML.
2. Setelah itu kamu cari kode ]]></b:skin>.
3. Salin kode dibawah ini lalu pastekan tepat di atas kode ]]></b:skin>.

/* Prism Syntax Highlighter - trikkerenn.blogspot.com */
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:hidden;background-color:#323232;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;border-radius:3px;-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}
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:18px;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#555;border:1px solid #f0f0f0;display:block;margin:0;font-weight:700;text-indent:15px}
pre code{display:block;background:none;border:none;color:#999;padding:25px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.85rem;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}
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}

4. Selanjutnya kamu salin kode dibawah ini lalu letakkan tepat di atas </head> atau </body>.

<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>

Kemudian simpan Tema atau Template

Nah, agar Prism Syntax Highlighter bisa digunakan, kamu harus memakai kode pemanggil dibawah ini.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">kode HTML yang sudah di parse disini </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css">kode CSS yang sudah di minifier disini</code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">kode JavaScript yang sudah di parse disini</code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">kode JQuery yang sudah di parse disini</code></pre>

Sebelum di publish atau publikasikan sebaiknya klik pratinjau dulu biar gak ada yang salah

RESULT
Jika kamu tidak tahu web penyedia CSS Minifer dan Parse HTML tenang, saya punya toolsnya kok.

CSS Minifer Parse HTML

Akhir Kata

Nah sekian dulu Cara Membuat Prism Syntax Highlighter Di Blog. Jika masih belum paham silahkan berkomentar dengan bahasa yang sopan dan jika postingan ini bermanfaat menurut Anda jangan lupa bagikan ke Sosial Media atau ke Teman-teman Anda

Berlangganan artikel terbaru dari blog ini langsung via email.