PRE Tag with Line Numbers

https://plus.google.com/108949996304093815163/about

by Taufik Nurrohman

HTML

<pre><code>&lt;div class="example"&gt;
    &lt;span&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
&lt;/div&gt;</code></pre>
<pre><code>function frameReloader(triggerParent, title, target, url, h, text) {
    $(triggerParent).append(' - &lt;a href="#"&gt;'+title+'&lt;/a&gt;');
    $('a', triggerParent).live("click", function() {
        $(target).html('&lt;iframe width="100%" src="'+url+'" height="'+h+'"&gt;&lt;/iframe&gt;');
    $('#loadingtext').html('&lt;span&gt;'+text+'&lt;/span&gt;');
        $('iframe').load(function() {
            $('#loadingtext span').remove();
        });
    return false;
    });
}</code></pre>

CSS

body {
  background-color:#ccc;
  padding:50px;
}

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

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