Adding line numbers to code boxes

Whilst making Panda, my syntax highlighter which I wrote and am now using on this board (more here: https://github.com/AvacWeb/Panda#panda-syntax-highlighter ) I realized how extremely easy it is to add line numbers to code blocks.

Do not use this code if you have a Syntax Highlighter installed on your forum for your code blocks.

Line numbering can be achieved by this small snippet:

Code:

[panda=js]$(function(){
  var codes = document.getElementsByTagName('code');
  for(var i = 0, l = codes.length; i<l; i++)  {
      codes[i].innerHTML = '<ol class="code-lines"><li>' + codes[i].innerHTML.split(/\<br\s?\/?\>/).join('</li><li>') + '</li></ol>';
  }
});

You can style it with the classname 'code-lines' (.code-lines) in the css.

The script works simply by taking the HTML inside code boxes, splitting it down into each line and re-joining it as an ordered list, which will have numbers.

Enjoy.