Ditulis oleh: Ditulis pada: 11/05/2014
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.