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

19 Responses to "Cara Menambahkan Line Number Pada Syntax Highlight.js"

  1. terima kasih mas.

    Mas saya mencoba menghilangkan efek hovernya dan linknya gagal mulu, semoga bisa membantu :D

    http://jsfiddle.net/Anonymousir/bxh57/

    BalasHapus
  2. mantab ,
    tapi saya sudah berhasil sekitar 5 bulan yang lalu :p :D

    BalasHapus
  3. cara bikin widget TERAKHIR DI PERBAHARUI gimana ya mas, yang kaya di sidebarnya mas wahyu ini

    BalasHapus
  4. gan ko saya nggak bisa yah gan tanda < semuanya kesalahan mengurai xml katanya gan ..

    BalasHapus
  5. di bagian kode javascript nya gan mohon bantuannya

    BalasHapus
    Balasan
    1. Penulisan javascriptnya seperti ini
      <script type='text/javascript'>//<![CDATA[
      paste javascript disini
      ;//]]></script>

      Hapus
  6. mangstab bang. Ijin mencoba yah :) keren nih templatenya :)

    BalasHapus
  7. Maaf kang, kalo syntax yang blog ini pakai minta di share dong, paket lengkapnya biar gak pusing menerapkan pada blognya. soalnya keren yang di pakai blog ini.
    Terima kasih sebelumnya. Oya satu lagi kang, templatenya keren tapi sayang belum jadi makanan umum hehehe :p

    BalasHapus
  8. tutorial langkah nih, amankan dulu ah o/

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel