Mudah sekali menggunakan Syntax Highlighter dengan prism.js pada Blogger

Assalamualaikum kawan, kali ini Admin Ren akan membahas tentang cara membuat sekaligus memakai syntax highlighter menggunakan prism.js. Seperti apakah syntax highlighter? Apakah ada manfaatnya ketika kita memakai Syntax Highlighter? Apakah ribet memasang Syntax Highlighter? Apakah bisa digunakan untuk Blogger? Bagaimana cara menggunakan Syntax Highlighter? Oke kawan nanti akan Admin Ren bahas di pembahasan ini mengenai syntax highlighter.

Baca juga nih jobsmart.co.id : Situs informasi lowongan kerja terbaru di indonesia

Pasti kalian para coder/maniak coding sudah tau ya mengenai tentang Syntax Highlighter, hehe. Syntax Highlighter atau kalau Admin Ren terjemahkan ke dalam bahasa indonesia yaitu Penyorot Syntax merupakan salah satu metode penulisan khusus untuk code-code program pada artikel kalian kawan, nanti Admin Ren akan terapkan disini deh, hehe. Menurut Admin Ren sendiri sih, Syntax Highlighter merupakan salah satu cara metode penulisan code program dengan tampilan yang berbeda, ada warna-warninya gitu kawan pada code yang sudah kita buat, ya seperti sublime text atau text editor lainnya lah kawan, hehe. Akan lebih indah ketika melihat kode-kode program dengan warna-warni, kek ada manis-manisnya gitu deh, hehe.

Manfaat menggunakan Syntax Highlighter? Ohh ada kawan manfaatnya untuk menggunakan ini. Manfaatnya apa Admin Ren kalau kita menggunakan Syntax Highlighter? Manfaatnya itu adalah untuk memperindah suatu kode program pada artikel yang kita sajikan untuk tutorial pembahasan programming kawan, hehe. Selain itu, manfaat lainnya yang bisa kamu dapat menggunakan Syntax Highlighter yaitu memberikan rasa nyaman kepada para pembaca khusus para coder/maniak coding untuk membaca code program dan memahaminya langsung, dan mendapatkan kesan kesan dari para pembaca.

Ribet gak sih cara memasangnya? Tidak terlalu ribet kok kawan, kamu cukup ikuti langkah-langkah yang sudah Admin Ren susun, hehe. Kalau kamu sampai kena problem saat memasang syntax highlighter atau menggunakan syntax highlighter pada website kalian terutama pada cms/platform blogger, kamu boleh tanyakkan saja kepada Admin Ren melalui komentar yang sudah Admin Ren sediakan, hehe.

Bisa gak sih di gunakan ke blogger? Wahh bisa banget kawan, haha. Dan untuk semua CMS/Platform atau website yang dibuat tanpa platform pun bisa menggunakannya lho kawan, hehe.

Untuk cara menggunakannya, mari kamu simak pembahasan ini sampai tuntas yoo kawan, hehe.

Tutorial Menggunakan dan Cara pemasangan Syntax Highlighter Dengan Prism.js

1. Langkah yang paling utama itu adalah kamu harus login dulu kawan di blogger.com, hehe. Setelah login, masuk ke mode edit template kawan, dengan cara lihat pada navigasi kiri yang bertuliskan "Template" > Edit Template.
2. Kamu tempatkan code css dibawah ini di dalam <style> atau di ]]></b:skin> dengan cara CTRL+F

 
/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#222;position:relative;max-height:500px;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#fff;display:block;margin:0 0 15px 0;font-weight:400;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;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:#c2bfd2;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#ba3a3e;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#666;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
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:#222;}
.comments pre::before {content:'Code';font-size:12px;position:relative;top:0;
background-color:#0fc66f;padding:1px 6px;left:0;right:0;color:#fff;text-transform:uppercase;
display:inline-block;margin:0 0 10px 0;font-weight:400;border-radius:3px;border:none;}
.comments pre::after {font-size:11px;}
.comments pre code {color:#c2bfd2;}
.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;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#2a2a2a;border-right:1px solid #3a3a3a;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#666;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="CSSku"]:before{background-color:#0183c5;}
pre[data-codetype="HTMLku"]:before{background-color:#ee7147;}
pre[data-codetype="JavaScriptku"]:before{background-color:#c2a3d0;}
pre[data-codetype="JQueryku"]:before{background-color:#c2ac79;}

3. Kamu tempatkan code di bawah ini di atas </body> atau bisa juga kamu tempatkan di bawah <head> kawan.

 
$('i[rel="pre"]').replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
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);
}

//Pre Line Number
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
  Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})

4. Setelah semua itu selesai, klik simpan untuk simpan hasil yang kalian edit kawan.

Gampang kan kawan cara memasangkannya, hehe. Lalu bagaimana cara menggunakannya Admin Ren? Ohh iya Admin Ren lupa nih untuk menjelaskannya, hehe. Cara menggunakannya gampang kok kawan, hanya memasukkan source di bawah ini  pada artikel kamu, khusus untuk blogger, kamu bisa menggunakan mode html, untuk memasukkan source yang ada dibawah ini, kamu sudah bisa menggunakan Syntax Highlighter kawan.

 
<pre data-codetype="CSSku" title="judul syntax highlighter"><code class="language-zzzz"> 
// Statement code...
</code>
</pre>

Catatan: Untuk mengganti bahasa pemrograman yang ingin kalian pakai, ganti di class="language-zzzz", ganti text zzzz dengan bahasa pemrograman yang ingin kalian pakai. Silahkan ganti dengan sesuka hati di bagian title="judul syntax highlighter" dengan kata-katamu sendiri kawan, hehe.

Sebenarnya sudah terintegrasi lhoo kawan dengan semua bahasa pemrograman, hehe.
Oke deh kawan selesai deh tutorialnya, sangat mudah bukan?? Mudah banget dong, wong hanya beberapa langkah-langkah ya kawan, hehe. Kalau ada problem tentang Syntax Highlighter kamu bisa tanyakkan kepada Admin Ren melalui komentar disini yang sudah Admin Ren sediakan kawan, oke kawan sekian dan terima kasih.

Wassalamualaikum War'rahmatulahi Wabarakatu.

• Tweet
• Share
• Share
• Share
• Share

Kamu baru saja membaca artikel yang berkategori Bahasa Pemrograman / Blogger / CSS / HTML / Javascript / Programming Language / Web Programming dengan judul Mudah sekali menggunakan Syntax Highlighter dengan prism.js pada Blogger. Kamu bisa bookmark halaman ini dengan URL http://renseo.blogspot.com/2016/06/mudah-sekali-menggunakan-syntax-dengan-prism.js-di-blogger.html. Terima kasih telah berkunjung ke Website Ini!

Tentang Admin Ren

Admin Ren adalah seorang pelajar yang sedang mempelajari tentang seputar Blogging, Programming, dan juga SEO. Dan juga sering kali iseng-iseng untuk mengikuti kontes-kontes seo dan juga perlombaan lainnya yang menurut Admin Ren menarik.

Related Post