Dino Latoga

SyntaxHighlighter is a nice tool that makes the code snippets on your blog look pretty. It’s based on Javascript so it’s unobtrusive and degrades gracefully. It’s client side based so it works on every server. It supports C++, Javascript, PHP, XML, CSS and the most common languages out there. It’s easy to deploy and it supports most browsers. With all those nice things said, it still does something that ruins your day. SyntaxHighlighter makes your XHTML invalid.

Why is that a problem? See this, you’ve been coding this cool design for hours, making pretty damn sure that you are using valid XHTML. And then you install a script and suddenly all the valid mark up that you’ve coded for hours becomes invalid because of a tiny tag.

To use SyntaxHighlighter, you must enclose your code snippet with a <pre> tag and set a name="code" attribute. But name isn’t allowed for this tag anymore. You can also use the <textarea> tag but shouldn’t that be inside a <form>?

The Quick Solution

So here’s a fast, simple and mean solution that I did to make my XHTML code valid again. I know I’m not the first one who discovered this but I’m just here to share.

First, open shCore.js with your favorite code editor program. Find this line:

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

and then replace it with the following code snippet.

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

Save your file.

So instead of setting the name attribute, you can now use the title attribute which is 100% valid for the <pre> tag. I’ll be using this simple hack for quite sometime until the SyntaxHighlighter developer comes up with something more pretty.

I would love to hear your comments and suggestions about this hack.

Tags: code, hack, javascript, quickfix, syntaxhighlighter