Line numbering source code snippet with Javascript function on body load

Yesterday's blog I am talking about performing line numbering using Javascript for-loop hard coding. Since you have to count the line numbering beforehand in order to hard code it, this is quite troublesome. Here is a more automatic method, no need to count the line number manually.

Here is a program code snippet using this line numbering method :

program Hello_World ; begin writeln('Hello World !'); { This source code snippet is line numbered using a Javascript function which replace every line with a <li> and then use the HTML order list tag in order to make it appear as line numbering. As a result, there is a "dot" after each line number. Noted : This method does not work in IE6 when the convert-line-breaks option is turn off in blogspot. Therefore, I simply disable this method for all IE. So, if you are using IE to read this web page, there is no line numbering for this program snippet. } end.

The steps of this method are :

Use a HTML TTT tag with a class XXX where TTT is either a pair of (pre + code) tags or just a div tag. Put the source code inside the TTT tags Use a Javascript function to process every lines inside the TTT tags Make the HTML to call this function in the body tag onload attribute.

The class XXX in the TTT tag is used for easy setup for CSS style sheet. Using the above example, the blue line border and the alternate gray line background image are the CSS style sheet settings.

Also, this class XXX can help as an identifier for the Javascript function to identify this special piece of information for processing. When the browser load this HTML, the function will do the following:

Search all TTT elements in the HTML with the class XXX. Start processing the innerHTML information of this element Firstly, add an order list tag <ol> at the beginning with a class XXX. For each line, add a list item tag <li> at the beginning of the line At last, close the order list using this tag </ol> Then, replace the innerHTML using this new piece of information.

When the function is ready, call the function in the onload attribute of the HTML body tag. Using this way, when the HTML is loaded by the browser, this function will be automatically called. The function will scan the whole document to search for all TTT elements to add the order list processing for your source code snippets.

When applying this method in blog post of blogspot, something additional has to be done :

• Firstly, it will be more easy to put the Javascript function in an external Javascript js file in an outside server, rather than putting inline in the HTML blogspot settings.
• When the convert line breaks option is turn on, blogspot will replace the hard return with <br> in Firefox 3.0.6 (<BR> in IE6) in the source code snippet. In other words, the source code snippet is no longer line-by-line as seen in the blogspot editor. Instead, the original "lines" are separated by either <br> or <BR> in the innerHTML. The Javascript function has to take care of this during the processing.
• When the convert line breaks option is turn off in blogspot, no <BR> will be inserted. Then, in IE6, there is not way to "identify" something to convert to <li>. So, I have to disable using this method when detecting a IE browser.

Using this method, the disadvantages are:

1. One disadvantage is about the browser. As you may have noticed, if this page is read by Firefox 3.0.6, the alternate gray line background image does not match the source code text lines. It is quite difficult to control the line height of the HTML order list tag using CSS under Firefox 3.0.6 (I am still looking into this issue). But, when reading with IE6 or Google Chrome 1.0.154.53, there is no such problem. Maybe this is a bug in Firefox.
2. Moreover, since the source code is inside the order list tag, it is quite difficult to cut-and-paste the source code in Firefox to Notepad or Writepad. When paste to PSPad, the line number is also pasted. However, if using Google Chrome 1.0.154.53, the line number is also hightlighted during copy. But, there is no line number after paste. The source code looks fine !
3. In addition, as tested on 2009-03-21, one serious drawback of this method under IE6 is that the indentation leading space are all gone in IE6.
4. At last, as mention before, this method is disabled when detecting a IE browser because my blogspot has turn off the convert-line-breaks option starting 2009-03-22. This is because I cannot detect a "lin" after turning off the convert-line-break option.

---