Cara Menambahkan Line Number Pada Syntax Highlight.js

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.

Download Syntax Highlight.js

Menambahkan Line Number Pada Syntax Highlight.js

1. Tambahkan CSS di bawah ini

pre.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
        }
    }
};

3. Cara Penerapan Dalam Posting

<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