Skip to main content

Menambahkan 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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB