小提琴作品 - 实际网页没有 - <code> <pre></pre></code>

Question

http://jsfiddle.net/tovic/AbpRD/

Fiddle有JavaScript，HTML，CSS 当代码放在网页中并呈现时则不会 表现得像小提琴一样（即没有行号）

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