Making SyntaxHighlighter XHTML 1.0 Strict compatible

As you may have seen, I have a new Theme now 🙂 Along with the Theme, I also looked at ways to add proper Syntax highlighting. After a little conversation at Twitter with srijken, I had a look at the SyntaxHighlighter that is being used by Scott Hanselman as well.

Now, the result is quite good, as you can see in some earlier posts. Unfortunately, it breaks XHTML compatibility because it requires a name-attribute on pre-tags, which is non-standard. Well, I do not want to start a discussion whether or not a page should validate, but as this is my only validation error I've decided to fix it.

Essentially, my pre-tags now use the "lang" instead of the "name" attribute. There is a slight validation error here, because lang is supposed to specify a valid language code like "de" or "fr" for German and French, and using it now with "nonsense" values may be an accessibility problem. However, I am not aware of any case where this would cause a problem when used in a pre-tag, so I decided to use it.

The change to make is in shCore.js, where you change this function:

	function FindTagsByName(list, name, tagName)
	{
		var tags = document.getElementsByTagName(tagName);
		for(var i = 0; i < tags.length; i++)
			if(tags[i].getAttribute('name') == name)
				list.push(tags[i]);
	}

See the getAttribute call? Change 'name' to 'lang' and you're done:

			if(tags[i].getAttribute('lang') == name)

Of course, you now have to change all your existing pre-tags, but well, being standard-conform is not always easy 🙂

Update: The SyntaxHighlighter seems not to highlight JavaScript. I switched to google-code-prettify now, which has the advantage of supporting JavaScript for Highlighting and a bit easier integration. It's used on StackOverflow and I like the output it produces, even though I recommend adding a "overflow: auto;" to the CSS file inside the prettyprint class.