Cara Menciptakan Prism Syntax Highlighter Di Blog Versi Flat Design

Tak terasa sudah 1 bulan saya tidak mengupdate blog ini.

Kebetulan alasannya yaitu tadi sore ada Sahabat Kang Wira yang meminta arahan Prism Syntax menyerupai yang saya gunakan disetiap artikel, jadi sekalian saja saya buatkan artikelnya alasannya yaitu ketika ini saya memang sedang ada sedikit kesibukan sosial.

Ohya.. sebelum kau melanjutkan membaca tutorial ini, pastikan kau sudah tahu pengertian Prism Syntax Highlighter dulu yah. Karena pada artikel ini, saya hanya menawarkan sedikit ulasan ihwal Prism Syntax.

Kebetulan alasannya yaitu tadi sore ada Sahabat Kang Wira yang meminta arahan Prism Syntax menyerupai y Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design

Kebetulan alasannya yaitu tadi sore ada Sahabat Kang Wira yang meminta arahan Prism Syntax menyerupai y Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design

Pengertian Prism Syntax

Prism Syntax Highlight yaitu sebuah frame yang khusus dibentuk untuk menampilkan beberapa Kode menyerupai HTML, CSS, Java Script, JQuery, PHP, dan lain sebagainya.

Biasanya Prism Syntax sangat diharapkan bagi blogger yang bahagia menyebarkan pengalaman menyerupai Cara Mengedit Menu Navigasi Blog dan Cara Praktis Optimasi Gambar pada Blog atau banyak juga blogger yang membagikan tutorial-tutorial untuk menciptakan aplikasi smartphone yang harus menampilkan arahan / script didalam artikelnya.
Lihat misalnya Di Bawah ini.

kode HTML yang sudah di parse disini

kode CSS yang sudah di minifier disini

kode JavaScript yang sudah di parse disini

kode JQuery yang sudah di parse disini

Sebenarnya menampilkan arahan didalam artikel tanpa memakai Prism Syntax Highlighter itu tidak begitu kuat sih, tapi frame ini berperan penting untuk mendapat performa pada tampilan blog biar terlihat lebih baik.

Nah jika Kamu tertarik untuk pasang frame ini, silahkan kau lakukan langkah-langkahnya dibawah ini yah.

Langkah Pertama sih pastinya kau harus sudah login dan berada di dashboard blogger yah
Lalu selanjutnya buka hidangan TEMA dan klik tab Edit HTML
Setelah itu salinlah arahan dibawah ini dan letakkan sebelum arahan </style>

/* CSS Prism 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: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}

Selanjutnya kau salin dulu arahan dibawah ini kemudian letakkan sehabis arahan <head> atau sebelum arahan </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>

Baca Juga

Simpan Template yang sudah kau edit tadi.

Selanjutnya kau dapat mencoba arahan tersebut dengan cara buat artikel gres kemudian salin arahan pemanggil Prism Syntax Highlighter dibawah ini pada postingan baru.

<pre title="Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design" data-codetype ="HTMLku"><code class="language-markup">kode HTML yang sudah di parse disini </code></pre> <pre title="Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design" data-codetype ="CSSku"><code class="language-css">kode CSS yang sudah di minifier disini</code></pre> <pre title="Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design" data-codetype ="JavaScriptku"><code class="language-javascript">kode JavaScript yang sudah di parse disini</code></pre> <pre title="Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design" data-codetype ="JQueryku"><code class="language-javascript">kode JQuery yang sudah di parse disini</code></pre>

Save Artikel gres itu kemudian Pratinjau risikonya dulu sebelum di Publish.

Jika kau merasa kesulitan dalam mempraktekkannya, kau dapat berikan komentar kau dibawah yah.

Dan jangan sungkan untuk bertanya apabila script diatas sudah tidak berfungsi dengan benar.

Ohya.. untuk Parse arahan yang akan kau tampilkan dalam artikel, kau dapat gunakan Parse Tools yang ada di blog ini atau klik Tombol PARSE dibawah ini.

PARSE HTML

Nah sekian dulu tutorial ihwal Cara Membuat Prism Syntax Highlighter di Blog Versi Flat Design ini, alasannya yaitu tak terasa waktu sudah menjelang pagi. Semoga Bermanfaat yah.

Jangan Lupa Share