Cara Menambahkan Line Number Pada Syntax Highlight.js

cara menambahkan line number pada syntax highlight.js
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.

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

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar