Cara Memasang Prism Syntax Highlighter Pada Posting Blog

Asslamualaikum Wr,Wb, Kali ini CREPICTDGZ akan berbagi tips Cara  Memasang Prism Syntax Highlighter Pada Posting Blog yang tak hanya tampak menarik namun juga profesional , Prism Syntax Highlighter ini adalah sebuah fitur yang memang dibuat bagi sobat yang ingin berbagi script atau kode terkait pebuatan widget atau hanya ingin berbagi kode saja.

Prism Syntax Highlighter berupa border teks kode (Pre Code) yang umumnya digunakan sebagai sarana berbagi kode script seperti HTML, CSS, JavaScript, JQuery.Fitur ini memberikan kesan yang menarik,simple,clean( bersih ) .

Untuk DEMO Sobat bisa langsung lihat Prism Syntax Highlighter yang juga saya gunakan seperti dibawah ini,jadi DEMO-nya adalah yang saya gunakan seperti dibawah ini.

Memasang Prism Syntax Highlighter Pada Posting Blog

1. Pertama buka Blogger Sobat.

2. Kemudian klik "Theme/Tema" dan masuk ke "Edit HTML".

3. Jika sudah, masukan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau dibawah </style> atau dibawah model kode seperti ini <style type='text/css'> :

/* 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;}

4. Lalu Sobat masukan kembali kode di bawah ini tepat diatas kode </body>.

 <script src='https://rawgit.com/usman-kurniawan/crepict/master/crepictprism.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>

5. Terkahir Sobat "Simpan Template".

6. Tahapan penerpan script atau kode Prism Syntax Highlighter sudah selesai, saatnya menerapkannya pada posting blog atau artikel, Yang Sobat perlu perhatikan pertama buka "Entri Baru" dan pilih menu " HTML" dan bukan “ Compose “, dan masukan script di bawah ini sesuai keinginan.

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

7. Jika sudah Sobat bisa pilih menu "Compose" untuk melihatnya atau Sobat bisa langsung klik Pritinjau.

8. Selesai dan lihat hasilnya.

Demikian tips " Cara  Memasang Prism Syntax Highlighter Pada Posting Blog " semoga dapat bermanfaat bagi Sobat semuanya. Jika ada pertanyaan seputar tutorial diatas Sobat bisa isi pada kolom komentar yang tersedia atau Contact Admin..

Terimah Kasih sudah mengunjungi…