We like numbered code.

Why?

It is easy to reference.

When we are presenting sample code, it is much easier to say “check out line #24” than it is to say “on the line right after the the line where div#nav ends...”.

Need we more reason to do it?

Nope.

But how to do it?

Method 1: Number in the text, wrapped in a classed span.

Example: Dan Loda.

Good: Makes sense. Keeps the numbers on the same line as the code.

Bad: Somewhat sloppy. A lot of code to deal with on every line. if you change the code all od the number change.

Method 2: Wrap all the code in an ordered list.

Example: Simon Willison

Good: The numbers are automatically generated.

Bad:The code itself has even more with extra tags, Opening and Closing <li> and <code> tags for every line.

Proposed method: Numbers as background image.

Example:

pre.linenumbers {
	margin:0;
	padding-left:25px;
	background: url(linenumbers-12-14.gif) top left no-repeat;
	font-size:12px;
	line-height:14px;
	}

Good: No extraneous code. All it takes is a #60;pre>. Content can bechanged with out ever having to worry about the numbers. It is easy to copy and paste, when you are copying example code, you don’t want to copy it as a list. You want to copy it as text you can use. And you don’t want to copy the line numbers along with it. It makes no structrual sense to mark it up as a list.

Bad: Requires the use of an image [avaible here]. Limited to 150 lines [for presenting code snippets, this should be plenty. And the current image is only 2.5k so it would be easy to make a longer version.] Text size is locked at 12px, with 14px line height.

Valid XHTML 1.1! Valid CSS!