how to display source code with line numbers into a blog

Today I realized that it will be better to have line numbers shown with the parts of code I publish into this blog.
I tried with google but didn't find any "easy" way to do it.
So I figured out my way which I am going to describe here!
First of all I wanted to show line numbers for the code but I also wanted the visitors to be able to copy the code without the line numbers.

As I'm using the <pre> tag to show my code I wrote a JavaScript function which will get the pre tags and change their innerHtml.

Here is the function:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
function showLineNumbers() {
 /************************************ 
 * Written by Andreas Papadopoulos   *
 * http://akomaenablog.blogspot.com  *
 * akoma1blog@yahoo.com              *
 ************************************/
  var isIE = navigator.appName.indexOf('Microsoft') != -1;

  var preElems = document.getElementsByTagName('pre');
  if (preElems.length == 0) return;
  for (var i = 0; i < preElems.length; i++) {
    var pre = preElems[i];
    var oldContent = pre.innerHTML;
    oldContent = oldContent.replace(/ /g,"&nbsp;");
    var strs = oldContent.split("<br>");
    if (isIE) {
       strs = oldContent.split("<BR>");
    }

    oldContent = oldContent.substring(4); //remove the 1st <br>
    var newContent = "<table><tr>";
    newContent  = "<td bgcolor='#d4d0c8'>";
    for(var j=1; j < strs.length - 1; j++) {
        newContent += j+".<br>";
    }
    newContent += "</td><td> </td><td>";
    newContent += oldContent;
    newContent += "</td></tr></table>";

    pre.innerHTML = newContent;
  }
}

I saved the above in a file let's say showLineNumbers.js and uploaded somewhere.
Let's explain the code: 
Line7: Check if browser is Internet Explorer
Line9: Get all the pre elements
Line13: Get the html inside the pre tag
Line14: Replace all the spaces with the sequence "&nbsp;"
Line14: Remove the first <br> from the inner Html
Line15-18: How many lines are in the pre tag (depending on browser)
Line21-22: Html code to create a table , row and a cell with background colour = #d4d0c8 (You can change it if you don't like it)
Lines23-25: Fill the cell with the numbers 1 till the lines of pre tag
Line26-28: Add the old content in the next cell
Line30: Set the new html code as the code for the tag element

Notice that you can copy the code without the line numbers if you want. You just copy the right cell of the table! That's something I really wanted. Visitors can copy only the code!

After that I had to link the code with my template.
How?
Log in to Blogger - Select Layout and then Edit HTML
Now add before the </head> the line:
<script src='http://..../showLineNumbers.js' type='text/javascript'/>

and now we have to call the function in the showLineNumbers.js so we add before the </body>
<script type='text/javascript'>
showLineNumbers();
</script>

Preview template and if it's ok save it. Remember to backup your template before changes.

Tip1:
If you use pre tag for other purposes too or you use other tag you defined in a css file for your code
then edit the javascript function for your needs.

For example if you defined the tag code in your css file and use it inside a pre block then you add
these lines to the function at line 12:

1.
2.
    var code = pre.getElementsByTagName('code')[0];
    if (code == null) continue; // no code; move on

Tip2:
You can use the tool postable to replace any characters that create problem with html.

Tip3:
I tested the above code with Another Computers Blog and firefox 3.0.10 and Internet Explorer 8 and worked fine.

I hope this will help you. I am waiting for your comments.