Menambahkan Penomoran Baris Pada Prism Syntax Highlighter

Menambahkan Penomoran Baris Pada Prism Syntax Highlighter

Bola Hero Gawai

Menambahkan Penomoran Baris Pada Prism Syntax Highlighter

Penomoran Baris Pada Prism Syntax Highlighter
Menambahkan Penomoran Baris Pada Prism Syntax Highlighter - Sebenarnya untuk membuat atau menambahkan syntax highlighter dari Prism ini sudah disharing oleh +Kang Ismet dengan 2 tema yaitu light theme dan dark theme. Dan cara penerapannya pun cukup mudah karena kita sudah disediakan kode CSS dan Javascript serta kode penulisan untuk membuat postingan syntax highlighter.

Nah kini saya akan share cara menambahkan penomoran baris pada Prism syntax highlighter ini agar terlihat lebih rapih dan memberikan tampilan lain dari sebelumnya pada Prism syntax highlighter yang sudah Anda gunakan.

Jika Anda sebelumnya sudah menggunakan Prism syntax highlighter dari postingan Kang Ismet tersebut, maka Anda hanya perlu menambahkan beberapa kode untuk menambahkan penomoran baris pada Prism syntax highlighter.

Untuk demo Prism syntax highlighter dari Kang Ismet bisa dilihat pada link demo di bawah ini.


Source: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

Silahkan gunakan kode di bawah ini agar Prism syntax highlighter yang sudah Anda gunakan secara otomatis memiliki penomoran pada baris syntax-nya.

Kode CSS


pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}

pre.line-numbers > code {
position: relative;
}

.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}

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

Source: http://prismjs.com/plugins/line-numbers/

Prism syntax highlighter yang sudah Anda publish sebelumnya pada postingan tidak perlu dirubah karena akan otomatis ditambahkan class="line-number" oleh kode $('pre').attr('class', 'line-numbers'); pada javascript di atas. Jadi Anda hanya perlu menambahkan kode CSS dan Javascript di atas dan semua Prism syntax yang sudah Anda buat akan otomatis memiliki penomoran baris.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×