CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS

Bagaimanakah cara agar tag pre terdapat nomor otomatis berikut ini cara pemasangannya

1. Masukan kode java script berikut ini pada template, letakan pada kode sebelum </head>

<script type='text/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>';
        }
    }
})();​
</script>

2. Masukan kode CSS untuk tag pre tersebut, tempatkan bersama dengan kode CSS template blog

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;
}​

3. Untuk menggunakan tag pre dengan nomor otomatis ini gunakan format html berikut pada form penulisan artikel

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

Hasil dari javascript diatas bisa dilihat di gambar berikut ini

tag pre with number

Untuk langkah-langkah cara memasukan tag pre dalam postingan kalian bisa lihat dalam tutorial CARA MEMBUAT TAG PRE VANILA STYLE disitu disajikan lengkap mulai dari awal. Semoga artikel CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS ini bisa bermanfaat bagi para blogger semua. Untuk mengetahui lebih detail tentang isi dan fungsi javascript diatas bisa dilihat pada blog sumbernya Taufik Nurrohman