After searching through the WordPress plugins, I was unable to find a syntax highlighter that included all the features that I wanted. Syntax Highlighter by Alex Gorbachev produced the kind of output that I was looking for, and sure enough, there were already several implementations of it, but the ones I tested were out of date and they just inserted all the files in the package directly into the page, which killed page loading performance. I couldn't help but notice non-coders leaving comments on the pages of the other plug-ins asking for a front-end that would let them remove the unused syntax files too. Thus, Easy Syntax Highlighter was born.
Install
Download Easy Syntax Highlighter and upload it to your blog, then once it's activated, just insert code into your post in the following format.
When you are happy, preview or publish the page, and the output should be something like this.
alert("Hello world");
FAQ
The most important thing to do once you've got it up and running is to optimise your page. First, you should decide whether to let the plugin add the brushes for you or to do it manually and disable any brushes that aren't needed for your blog. The second thing to do is enable the option that puts the brush loading into the page footer. The footer option may not work for all themes though as some don't have a footer, so if you find the formatting vanishes when you turn this on, then you may be one of the footer-less, so leave it off. There's a lot of other thing that can be changed. More details are available on Alex's settings page. You can leave any comments or report any bugs right here.
The easiest way to enter you code to highlight is to paste it in the Visual tab of the WordPress post editor, then switch to the HTML tab and put the <pre> and </pre> tags around the code. Doing it this way will allow WordPress to convert the greater than and less than symbols in your code into HTML safe strings, which will be ignored by the web server. This is especially important if you are inserting HTML code.
There's a known bug in WordPress that breaks the CDATA method of specifying a code block to highlight by replacing the trailing "]]>" with "]]>" in the rendered output. More details are available here.
I've had several reports of highlighter problems that cause code snippets to have about 10 lines of space between each line of code. This problem is related to the Lightword Theme by Andrei Luca, specifically, line 99 of Lightword's style.css file:
It's setting the minimum height of a post <div> to 150px, which is being inherited by the embedded <pre> tags in the post.
You can fix it by removing the minheight entry from the line:
.hentry{height:auto!important;margin-bottom:1em;}
There's a lot of other things that can be changed. More details are available on Alex's settings page. You can leave any comments or report any bugs right here.
