I’ve been using Alex Gorbatchev’s SyntaxHighlighter Evolved to post code to my blog since early this year. I’ve recently moved to self-hosting my blog and it was one of the first plugins I installed. I can’t say enough good things about it. It is a great plugin for simple syntax highlighting of anything from html to C to Python (though unfortunately not Scheme, maybe I should write a brush for that).

When I ran my blog through the validator at w3c I noticed two problems. The first was with the Page Links To plugin using target=”_blank”. This was simple enough to fix, just uncheck the “Open this link in a new window” box. It’s probably better to let your visitors choose where they want their links to open, after all they can always middle click to open in a new tab.

The second problem was with SyntaxHighlighter Evolved’s use of <meta id=”syntaxhighlighteranchor” …> in the head tag. This is not valid html and was a bit harder to fix. I came across this post explaining the problem and rational behind the design while Googling for a solution. It seems that the id tag was used to provide a method for users to customize the plugin without editing the source files. Since I quite enjoy digging into the source files, this wasn’t a show stopper for me. In the end my solution was simple. Remove the feature and get on with my life.

The first thing to do is to locate this line…

		echo '<meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="' . esc_attr( $this->pluginver ) . '" />' . "\n";

and remove the id=”syntaxhighlighteranchor” tag.

The plugin uses document.getElementById(“syntaxhighlighteranchor”) twice so you have to make two changes. Instead of using the .insertBefore method to inject the css into the head element, use the .appendChild method.

		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
// becomes
		document.getElementsByTagName("head")[0].appendChild( corecss );

and

		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
// becomes
		document.getElementsByTagName("head")[0].appendChild( themecss );

You might want to put a comment in the sourcecode describing your change so you know what you did in the future in case it breaks. If you really think you’re going to forget, you can always write a blog post about it too.

Again I can’t say enough good things about SyntaxHighlighter Evolved. If you have an idea for a fix for this that preserves the original feature of being able to customize the plugin through css without delving into the sourcecode, please leave it in the comments.