Google SyntaxHighlighter - workaround for XHTML validation issue

Monday, August 25th, 2008 at 11:00 am

Last week I came across a good tool to create syntax highlighted source code from Google called SyntaxHighlighter. It is 100% client side javascript which supports multiple languages i.e. C++, C#, CSS, Java, PHP, Riby, XML/HTML, etc. Although it is very cool and easy to use but it creates an invalid XHTML code. The reason for this is because they use an attribute called ‘name’ in pre tag, which is not a valid attribute for this tag.

<pre name="code" class="XHTML">…</pre>

I have no idea if/when the project owner will fix this but there are few people raised this as an issue. So I decided to have a look in the code to see if there is any easy way I could do as a workaround while waiting for the new release. I think it should be easier to replace ‘name’ attribute with ‘title’ attribute which is a valid attribute for ‘pre’. So I modified a function called ‘FindTagsByName’ in shCore.js by changing getAttribute(’name’) to getAttribute(’title’).

function FindTagsByName(list, name, tagName)
{
	var tags = document.getElementsByTagName(tagName);

	for(var i = 0; i < tags.length; i++)
		if(tags[i].getAttribute('title') == name)
			list.push(tags[i]);
}

Now I can use Google SyntaxHighlighter that produces a perfectly valid XHTML page by using:

<pre title="code" class="XHTML">…</pre>