5/31/09

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:

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:

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.
Del.icio.us

10 comments:

Anonymous said...

This is just awesome.

Nice job :-)

Haqqi said...

Wow, awesome. Can you add some code that create a scrolled source code??? I mean, it will be able to scroll horizontally if the width is bigger than blog width???

Haqqi said...

OW, I'm sorry with my previous comment. After I try this, I knew that it is automatically create a scroll pane. Anyway, thanks.

But I have a problem when seeing it using Opera. The line number won't be displayed. I don't know why. Can you fix it??

Andreas Papadopoulos said...

Thank you my friend for your comment. I am really happy that you like my post. :-)
As you can see in this post http://akomaenablog.blogspot.com/2008/06/simple-senderreceiver-program-to.html it scrolls horizontally but you may need to change your css file. If you don't know how, try this and if it is not working just leave a comment to check it out.
Thank you.

note books said...

Thanks, really good job....

Anonymous said...

Great work. I hate it when the code contains linenumbers. >:(

vipin said...

Great program.. But do you have any syntax highlighter program for vhdl.I really need one.pls....

K. Ramesh Babu said...

Have you guys looked at this blog post? http://blog.ouseful.info/2010/03/11/screenscraping-with-google-spreadsheets-app-script-and-the-importhtml-formula/. If any one knows how to create that, I'd like to know. Thanks.

Collin Ticer said...

Great post. It doesn't yet support line numbers, but you can also give codexplode.com a try. You upload your code, and it highlights it for you. It then gives you your embed code so you can post it on blogspot.

Sakahayang Kang Asep said...

wow great script friend,
thx for your share

Related Posts Plugin for WordPress, Blogger...