Cara memasang 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