<pre>で囲ったプログラムコードに行番号を付加する方法

以下のように、<pre>中のテキストを改行ごとに取り出し、全体を<ol>でくくり、行単位で<li>を付加することで実現します。
※タグの追加時にわざわざ大小記号とタグキーワードを分けているのは、Safariでの表示バグを回避するためです。
実際にコードを書く際は繋げて書いてもかまいません。

function addCodeNum() {
    var pre = document.getElementsByTagName('pre');
    for (var i = 0, l = pre.length; i < l; i++) {
        var html = '<' + 'ol' + '>';
        var text = pre[i].innerHTML.replace(/ /g, ' ');
        if (navigator.userAgent.match(/MSIE/)) {
            text += "n";
        }
        var texts = text.split('n');
        for (var j = 0, m = texts.length-1; j < m; j++) {
            if (window.opera && texts[j] == '') {
                texts[j] = ' ';
            }
            html += '<' + 'li' + '>' + texts[j] + '<' + '/li' + '>';
        }
        pre[i].innerHTML = html + '<' + '/ol' + '>';
    }
}

コードを読みやすくするために、スタイルの方も設定してあげましょう。

/* this is program code style. */
pre ol {
    list-style-position:inside;
    list-style-type:decimal-leading-zero;
}