Software development

Before going onto bigger and better things, let’s start with something I thought will be trivial: displaying nicely formatted source code in WordPress blogs.
Obviously, I read and followed the instructions on the support page, where it says

Wrap your code in these tags:

[sourcecode language='css']

your code here

[/sourcecode]

Well, I did that, and the result did not look as shown on that page. At this point I had to start investigating. After saving the HTML page, I tried to figure out what makes the source code be nicely formatted. It turned out that the following lines are responsible:

These lines reference one stylesheet file and several JavaScript files. They were missing from the displayed HTML, so I tried to insert them into the posting itself. Remarkably, the <script> tag was left intact, but the <link> tag was removed. I had to somehow instruct WordPress to insert this specific <link> tag. And here is where “plugins” come handy because this is what they are designed to do: to insert specific files, both CSS and JavaScript in the HTML pages generated by WordPress.

Download here a sample HTML file that uses the highlighter JavaScript files independently of WordPress.

Searching for syntax highlighter in the plugins repository returns a few results. I installed what I thought will be the closest: Google Syntax Highlighter for WordPress and SyntaxHighlighter Evolved. It is important to mention that the latter seems to be derived from the former. The “evolved” version uses the
[sourcecode] tag (which gets converted to <pre>), whereas the “original” uses the <pre> tag.

This is how Google Syntax Highlighter for WordPress shows the code:

#button {

font-weight: bold;

border: 2px solid #fff;

}

and this is how SyntaxHighlighter Evolved does it:

#button {

font-weight: bold;

border: 2px solid #fff;

}

Between the two highlighting plugins I personally prefer the “original” Google Syntax Highlighter for WordPress version 1.5. Some other bloggers report the same preference (and also ask about how to downgrade from the “evolved” plugin). Maybe they will find this interesting: both plugins could co-exist (be active), as shown above; by using one tag or the other, one can choose the way the source code is displayed.

What the above mentioned WordPress tutorial omits to mention is that the [sourcecode] tag works ONLY after the SyntaxHighlighter Evolved plugin is installed. Well, it wasn’t really time wasted, since I learned something that may also help others.

References:

• SyntaxHighlighter
• Posting source code