Memang sebagian blogger menganggap Syntax highlighting sangat penting, terutama bari sobat blogger yang utamanya memuat artikel yang didalamnya terdiri dari CSS ataupun JavaScript. Menanggapi salah satu komentar dari teman blogger yang bertanya cara menambahkan line number pada syntax highlight.js. Saya coba menjelaskannya melalui postingan saya kali ini.
Syarat utama untuk menambahkan line number pada syntax highlight adalah blog sobat sudah memasang syntax highlighter. Terdapat 2 versi cara menambahkan system numbering pada tag pre. Anda harus memilih salah satu.
Pilihan Pertama
Bagi yang sudah memasang syntax, sobat tinggal menambahkan Javascript di bawah ini,Cukup dengan menambahkan JavaScript di bawah ini
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j+1) + '</span>';
}
}
})();Kemudian tambahkan CSS ini.
pre code,
pre .line-number {
font:normal normal 12px/14px "Courier New",Courier,Monospace;
color:black;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
border-right:1px solid;
text-align:right;
}
pre .line-number span {
display:block;
padding:0 .5em 0 1em;
}
pre .cl {
display:block;
clear:both;
}
Pilihan Kedua
Mengganti sintax highlight.js dengan versi di bawah ini, kemudian ikuti langkah no. 1 dan 2.
Menambahkan Line Number Pada Syntax Highlight.js
1. Tambahkan CSS di bawah inipre.numbered .line-number {
display:block;
float:left;
text-align:right;
margin:-10px 12px -10px -12px;
padding:10px 12px;
background-color:#140F0F
}
pre.numbered .line-number span {
display:block;
position:relative;
color:#bbb;
}
pre.numbered .line-number em {
font:inherit;
position:absolute;
top:-5px;
left:100%;
margin-left:15px;
background-color:#bbb;
border-color:#bbb;
color:#000;
line-height:1;
padding:4px 5px;
display:none
}
pre.numbered .line-number em:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-right-color:inherit;
border-bottom-color:inherit;
position:absolute;
top:50%;
right:100%;
margin-top:-4px
}
pre.numbered .line-number span:hover em, pre.numbered .line-number span:target em {
display:block
}
2. Tambahkan JavaScript ini di atas </body>
window.you_addNumber = function () {
var a = document.getElementsByTagName('pre'),
pl = a.length,
s;
for (var i = 0; i < pl; ++i) {
s = '<span class="line-number">';
a[i].id = !a[i].id ? 'code-block:' + (i + 1) : a[i].id;
if (/(^| )numbered( |$)/.test(a[i].className)) {
var b = a[i].getElementsByTagName('code')[0];
for (var j = 0, k = b.innerHTML.split(/\n/).length; j < k; ++j) {
s += '<span id="code-line:' + (i + 1) + '-' + (j + 1) + '"><span>' + (j + 1) + '</span><em>code-line:' + (i + 1) + '-' + (j + 1) + '</em></span>'
a[i].innerHTML = s += '</span>' + a[i].innerHTML + '<span class="cl"></span>'
}
you_autoSelect(a[i].getElementsByTagName('code')[0]);
if (window.location.hash && /code\-line\:([0-9]+)\-([0-9]+)|code\-block\:([0-9]+)/.test(window.location.hash)) {
var h = window.location.hash;
window.location.hash = h
}
}
};<pre class="numbered"><code class="css">kode anda</code></pre>
<pre class="numbered"><code class="HTML">kode anda</code></pre>
<pre class="numbered"><code class="javascript">kode anda</code></pre>
<pre class="numbered"><code class="jquery">kode anda</code></pre>4. Selamat Mencoba
Source :dte.web.id
Menambahkan nomor pada syntax highlight.js, cara menambahkan line number pada syntax highlighting.dengan menambahkan CSS ataupun JavaScript
Blok kemudian tekan tombol
Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..