Home tutorial Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design

Rabu, 05 April 2017

Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design

Tak terasa sudah 1 bulan saya tidak mengupdate blog ini.

Kebetulan karena tadi sore ada Sahabat Kang Wira yang meminta kode Prism Syntax seperti yang saya gunakan disetiap artikel, jadi sekalian saja saya buatkan artikelnya karena saat ini saya memang sedang ada sedikit kesibukan sosial.

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

Cara Membuat Prism Syntax Highlighter di Blog versi Flat Design

Pengertian Prism Syntax

Prism Syntax Highlight adalah sebuah frame yang khusus dibuat untuk menampilkan beberapa Kode seperti HTML, CSS, Java Script, JQuery, PHP, dan lain sebagainya.

Baca juga: Membuat Pricing Table Responsive


Biasanya Prism Syntax sangat dibutuhkan bagi blogger yang senang berbagi pengalaman seperti Cara Mengedit Menu Navigasi Blog dan Cara Mudah Optimasi Gambar pada Blog atau banyak juga blogger yang membagikan tutorial-tutorial untuk membuat aplikasi smartphone yang harus menampilkan kode / script didalam artikelnya.
Lihat contohnya 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 kode didalam artikel tanpa menggunakan Prism Syntax Highlighter itu tidak begitu berpengaruh sih, tapi frame ini berperan penting untuk mendapatkan performa pada tampilan blog agar terlihat lebih baik.

Nah kalau Kamu tertarik untuk pasang frame ini, silahkan kamu lakukan langkah-langkahnya dibawah ini yah.
  • Langkah Pertama sih pastinya kamu harus sudah login dan berada di dashboard blogger yah
  • Lalu selanjutnya buka menu TEMA dan klik tab Edit HTML
  • Setelah itu salinlah kode dibawah ini dan letakkan sebelum kode </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 kamu salin dulu kode dibawah ini lalu letakkan setelah kode <head> atau sebelum kode </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>

Simpan Template yang sudah kamu edit tadi.

Selanjutnya kamu bisa mencoba kode tersebut dengan cara buat artikel baru lalu salin kode pemanggil Prism Syntax Highlighter dibawah ini pada postingan baru.
<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>

Save Artikel baru itu lalu Pratinjau hasilnya dulu sebelum di Publish.

Jika kamu merasa kesulitan dalam mempraktekkannya, kamu bisa berikan komentar kamu dibawah yah.

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

Ohya.. untuk Parse kode yang akan kamu tampilkan dalam artikel, kamu bisa gunakan Parse Tools yang ada di blog ini atau klik Tombol PARSE dibawah ini.

PARSE HTML

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

Jangan Lupa Share
Related Posts