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.

---

Line numbering source code snippet using Javascript for-loop hard coding

Here is a quick-and-dirty method of adding line numbers to the source code snippet.

program Hello_World ; begin writeln('Hello, World !'); { This method of line numbering is not so smart. The line numbers on the left is generated using a Javascript for-loop with hard-coding the number of loops which is 12. } end.

The method is very simple : use a HTML table tag with only 1 row of 2 cells. The right cell is the code snippet. In the left cell, use Javascript to call a for-loop to document.writeln the line number.

The text inside both cells is inside a HTML pre tag. As long as they are of the same fonts and line heights, the line number will match the source code snippet.

Following coding snippet is contained inside a table of one cell :

program Hello_World ; begin writeln('Hello, World !'); { This method of line numbering is not so smart. The line numbers on the left is generated using a Javascript for-loop with hard-coding the number of loops which is 12. } end.

Using the same method, the line numbers are added :

program Hello_World ; begin writeln('Hello, World !'); { This method of line numbering is not so smart. The line numbers on the left is generated using a Javascript for-loop with hard-coding the number of loops which is 12. } end.

Now, the table consists of 2 cells in a row. The left cell is for line numbers.

The disadvantages of this method are:

1. One disadvantage of this method is that the number of loop is hard-coded. You have count the total number of lines in your source code snippet and put this number in the for-loop.
2. Another disadvantage is with the browser and blogspot.
   If the convert-line-breaks option is turn on in blogspot and you are using Firefox to read this page, the above table should be very perfect. The Pascal program end statement is at the line-12. But, if you are using IE6, the program end statement is at line-8. This is because the IE6 does not shown the blank lines from Blogger. There should be each of one blank line in between the statements program, begin, writeln, the block comment and the end statements. So, in order to take care of readers using IE6 and the convert-line-breaks is yes in blogspot, you have to count the number of blank lines and do a re-calculation on the final maximum number of lines for using in the for-loop.
   However, it the convert-line-breaks is NO, there is no such problem.
   Now, I have turn off the convert-line-breaks in my blog in blogsport and this page does not have this problem.

---