Menyematkan Prism Syntax Highlighter di Blog Terbaru 2016

Syntax Highlighter belakangan ini memang banyak ditemui di beberapa situs blog. Bahkan, saya juga memanfaatkannya, namun di sini saya memilih Syntax Highlighter dari Prism.js.

Apa itu Prism Syntax Highlighter? Prism Syntax Highlighter adalah baris kode yang ditampilkan dalam berbagai macam warna, tujuannya adalah untuk meringankan penggunanya di dalam menyalin bahasa pemrograman.

Cara Memasang Prism Syntax Highlighter di Blog

Pernah sewaktu ketika saya menggunakan syntax highlighter yang mempunyai bermacam-macam desain dan gambar, namun ternyata kala itu efek yang diterima sangat buruk, situs blog ini terlalu berat dan bahkan gagal untuk dimuat.

Setelah melakukan pencarian selama berhari-hari, akhirnya saya menemukan Prism Syntax Highlighter dan ternyata hasilnya sangat memuaskan. Selain ramah, Prism Syntax Highlighter juga mempunyai bentuk yang bersih daripada syntax highlighter yang dahulu pernah saya pergunakan. Untuk Anda yang juga ingin  memasangnya, silakan ikuti step by step di bawah ini.

1. Sign in ke Blogger, masuk ke Template dan Edit HTML.

2. Salin dan tempatkan kode berikut di atas kode </style>.

pre {
   padding:35px 10px 0px;
   margin:.5em 0;
   white-space:pre;
   word-wrap:break-word;
   overflow:auto;
   background-color:#222;
   position:relative;
   max-height:500px;
}
pre::before {
   font-size:14px;
   content:attr(title);
   position:absolute;
   top:0;
   background-color:transparent;
   padding:6px 10px 6px 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: &#39;Double click to selection&#39;;
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 6px;
    top: 6px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}
pre:hover::after {
   opacity:0;
   top:-8px;
   visibility:visible;
}
code {
   font-family:Verdana,Geneva,sans-serif;
   line-height:16px;
   color:#88a9ad;
   background-color:transparent;
   padding:1px 2px;
   font-size:12px;
}
pre code {
   display:block;
   background:none;
   border:none;
   color:#94b7bb;
   direction:ltr;
   text-align:left;
   word-spacing:normal;
   padding:10px;
   font-weight:none;
}
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:none;
}
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:#494158;
}
.comments pre::before {
   content:&#39;Code&#39;;
   font-size:0px;
   position:relative;
   top:0;
   background-color:#5a9ad2;
   padding:1px 6px;
   left:0;
   right:0;
   color:#fff;
   text-transform:uppercase;
   display:inline-block;
   margin:0 0 10px 0;
   font-weight:400;
   border:none;
}
.comments pre::after {
   font-size:0px;
}
.comments pre code {
   color:#94b7bb;
}
.comments pre.line-numbers {
   padding-left:10px;
}
pre.line-numbers {
   position:relative;
   padding-left:3.0em;
   counter-reset:linenumber;
}
pre.line-numbers &gt; code {
   position:relative;
}
.line-numbers .line-numbers-rows {
   height:100%;
   position:absolute;
   top:1px;
   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 &gt; span {
   display:block;
   counter-increment:linenumber;
}
.line-numbers-rows &gt; span:before {
   content:counter(linenumber);
   color:#A3A49A;
   display:block;
   padding-right:0.8em;
   text-align:right;
   transition:350ms;
}
pre[data-codetype=&quot;CSSku&quot;]:before {
   background-color:#2c9bdc;
}
pre[data-codetype=&quot;HTMLku&quot;]:before {
   background-color:#f56954;
}
pre[data-codetype=&quot;JavaScriptku&quot;]:before {
   background-color:#ee9537;
}
pre[data-codetype=&quot;JQueryku&quot;]:before {
   background-color:#00c0ef;
}


3. Selanjutnya, salin dan tempatkan kode berikut di atas kode </body>.

<script src='https://librasbr.googlecode.com/svn/prism.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>

4. Save template.

Sekarang Anda tinggal terapkan kode penyeru di dalam HTML posting.

<pre class="line-numbers language-markup" data-codetype="HTMLku" title="HTML"><code class=" language-markup"> kode HTML (yang sudah di`escape`) di sini... </code></pre>

<pre class="line-numbers language-css" data-codetype="CSSku" title="CSS"><code class=" language-css"> kode CSS di sini... </code></pre>

<pre class="line-numbers language-javascript" data-codetype="JavaScriptku" title="JavaScript"><code class=" language-javascript"> kode JavaScript di sini... </code></pre>

<pre class="line-numbers language-javascript" data-codetype="JQueryku" title="jQuery"><code class=" language-javascript"> kode jQuery di sini... </code></pre>

Pastikan dalam penulisan kode penyeru Anda harus berada di HTML editor bukan Compose.

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

6 Komentar untuk "Menyematkan Prism Syntax Highlighter di Blog Terbaru 2016"

avatar

gan, yang untuk C sama Java, itu kalo mau buat class baru dimana ya ? ane gak ketemu tempat class java scriptnya, jadi kalo keluar ntar diatas keluarnya javascript. padahal code nya C.
makasih gan :D

avatar

Pre class yang mana saja juga bisa dan jika hanya ingin mengubah judul cukup ganti titlenya nggak masalah ;)

avatar

Terserah Mas mau pakai yang mana, kalau mau PHP tinggal ganti saja judulnya dengan PHP.

avatar

cuma ada 4 bahasa aja ya.. itu html, css, sama js aja.. lagi nyari syntax Highlighter yg komplit..

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF