Menambahkan Penomoran Baris Pada Prism Syntax Highlighter

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

Nah sekarang aku akan share cara menambahkan penomoran baris pada Prism syntax highlighter ini semoga terlihat lebih rapih dan memperlihatkan tampilan lain dari sebelumnya pada Prism syntax highlighter yang sudah Anda gunakan.

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

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

DEMO

Source: https://komporajaibku.blogspot.com//search?q=

Silahkan gunakan instruksi di bawah ini semoga Prism syntax highlighter yang sudah Anda gunakan secara otomatis mempunyai 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 alasannya akan otomatis ditambahkan class="line-number" oleh instruksi $('pre').attr('class', 'line-numbers'); pada javascript di atas. Kaprikornus Anda hanya perlu menambahkan instruksi CSS dan Javascript di atas dan semua Prism syntax yang sudah Anda buat akan otomatis mempunyai penomoran baris.

DEMO PRISM WITH NUMBERS LINE

Sumber https://www.kompiajaib.com/

Share this post