Membuat Sistem Penomoran Otomatis pada Setiap Baris Kode di dalam Tag PRE

Tabel Konten
  1. Hasil Seluruh Pekerjaan + Dekorasi 
    1. HTML 
    2. JavaScript 
    3. CSS 
Membuat Penomoran Otomatis pada Setiap Baris Kode di dalam Tag PRE

Cara termudah untuk menciptakan baris-baris angka di dalam tag <pre> adalah dengan menghitung jumlah karakter ganti baris di dalamnya, kemudian kita gunakan hasilnya untuk menciptakan deret angka yang nantinya akan mengalir secara otomatis.

Kita mulai dengan markup HTML seperti ini sebagai gambaran awal:

<pre><code>Baris teks 1
Baris teks 2
Baris teks 3</code></pre>

Pertama-tama kita harus menyeleksi semua elemen <pre>:

var pre = document.getElementsByTagName('pre'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    // Lakukan sesuatu di sini melalui objek pre[i] ...
}

Setelah itu buat kontainer baris-baris angka dengan elemen <span>:

var pre = document.getElementsByTagName('pre'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    // Sisipkan kontainer angka-angka
    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
}

Markup HTML saat ini seharusnya sudah menjadi seperti ini:

<pre><span class="line-number"></span><code>Baris teks 1
Baris teks 2
Baris teks 3</code><span class="cl"></span></pre>

Hitung jumlah karakter ganti baris (\n) di dalam masing-masing elemen <pre>. Buat sebuah loop dengan batasan akhir sebanyak/sebesar jumlah karakter ganti baris yang ditemukan untuk membatasi jumlah angka-angka yang masuk ke dalam kontainer angka secara otomatis:

var pre = document.getElementsByTagName('pre'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    // Sisipkan kontainer angka
    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
    // Hitung jumlah karakter `\n` di dalam tag <pre>
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        // Menangkap elemen <span> pertama / elemen `.line-number`
        var line_num = pre[i].getElementsByTagName('span')[0];
        // Masukkan angka-angka ke dalam kontainer angka melalui elemen <span> baru
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}

Sekarang markup HTML sudah menjadi seperti ini:

<pre><span class="line-number"><span>1</span><span>2</span><span>3</span></span><code>Baris teks 1
Baris teks 2
Baris teks 3</code><span class="cl"></span></pre>

Sisanya tinggal memposisikan kontainer angka ke bagian samping dengan CSS agar letaknya menjadi berada di sebelah kiri kode-kode yang kita tuliskan di dalam tag <pre>:

pre {
  background-color:#eee;
  overflow:auto;
  margin:0 0 1em;
  padding:.5em 1em;
}

pre code,
pre .line-number {
  /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
  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;
}

Lihat Demo


Hasil Seluruh Pekerjaan + Dekorasi 

HTML 

<pre><code> ... </code></pre>

JavaScript 

(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>';
        }
    }
})();

CSS 

pre {
  background-color:white;
  padding:0 1em;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}

pre code,
pre .line-number {
  display:block;
  font:normal normal 13px/24px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#aaa;
  background-color:#f5f5f5;
  border-right:3px solid #6CE26C;
  text-align:right;
  min-width:2.5em;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .line-number span:nth-child(even) {background-color:#eee}

pre .cl {
  display:block;
  clear:both;
}

Lihat Demo

25 Komentar

  • Beben Koben

    Ini master tovik teh orang???
    Kok rajin banget yah :D
    Gile gile...gue mah ngerti penjelasan kata2nya tuh, cuman sudah masuk ke script jd puyeung :p
    Sapa tuh yg mosting piano pakek CSS doang di cssdeck???

    Kabuuurrr...

  • Unknown

    Keren abis. aku mau pakai tapi JS di blog udah lumayan hehee

  • Unknown

    @system of blog oh iya yang pembaruannya itu keren tapi bisa gak kita nulisnya cukup dengan <pre class="numbered">KODE KODE</pre> jadi gak terlalu ribet :D

  • Taufik Nurrohman

    @system of blog Itu sudah prosedur Highlight.js ⇒ HIghlight.js Test
    Kalau mau memakai versi yang hanya menggunakan tag <pre> bisa mencoba versi yang lain.

  • Unknown

    @Taufik Nurrohman oh ok deh :)

  • Unknown

    Menurut Saya Kalo Pake Nomor itu waktu copy kodenya , nomornya ikut ter-copy, jadi terpaksa hapus manual !
    #cuma-opini :-bd :Q

  • Taufik Nurrohman

    @Syndicate OS Kalau mau membaca, di atas sudah ada solusinya kok :)

  • Unknown

    @Taufik Nurrohman ketahuan kalo cuma liat judulnya aja :S

  • Unknown

    Minta ijin dulu ...mau tak pasang di blog saya

  • Anonim

    mass kalo pake addclass jquery biar otomatis pre ditambah class line-number bisa gak,biar gak ribet

  • Unknown

    masang nya gimana kk ~x(

  • Ana Sriwahyuni

    setelah saya pasang scriptnya, pada bagian for (var i = 0; i < pl; i++) { keluar pernyataan The content of elements must consist of well-formed character data or markup, solusinya mas??

  • Unknown

    kang, gimana caranya sewaktu di klik ganda bagian elemen nomer nya tidak ikut tercopy, sanya menggunakan fungsi ini <script type='text/javascript'>
    var pres = document.getElementsByTagName(&quot;pre&quot;);
    for (var i = 0; i &lt; pres.length; i++) {
    pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
    }, false);
    }
    </script>

  • Unknown

    tutor ini yg saya cari selama ini, tapi cara masangnya gmna?.
    plisss... butuh banget

  • Unknown

    mas supaya format penulisannya tidak harus seperti ini gimana mas?<pre><code>Baris teks 1
    Baris teks 2
    Baris teks 3</code></pre>
    misalnya bisa serti ini<pre><code>Baris teks 1
    Baris teks 2
    Baris teks 3
    </code></pre>

    <pre><code>
    Baris teks 1
    Baris teks 2
    Baris teks 3
    </code></pre>
    intinya misal pada baris pertama atau terakhir itu kosong tidak muncul line number. tidak masalah jika baris kosong itu ditengah.

  • Teknomia

    gak berhasil diterapin di Blogger Javascriptnya...
    atau sy yg gk tau caranya...
    sy taro javascript di atas /head

    <script type='text/javascript'>
    //<![CDATA[
    disini javascriptnya
    //]]>
    </script>

  • excelive

    kode javascript error pada bagian

    for (var i = 0; i < pl; i++) {
    atau pada tanda <

    mohon solusinya

    • Taufik Nurrohman

      Coba ganti:

      var pre = document.getElementsByTagName('pre'),
      pl = pre.length;

      menjadi:

      var pre = document.getElementsByTagName('pre');
      if (!pre.length) return;
      var pl = pre.length;
  • Andi Setiawan

    terima kasih, sudah dicoba dan work,

Komentar telah ditutup.