Mecha versi 2.6.4 sudah dirilis!

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

Unknown

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

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.

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;

Komentar telah ditutup.