Lengthy code snippets wrapped in standard <pre> tags can be rather hard to read. WordPress.com has a built-in syntax highlighter but the standard WordPress.org installation does not, and neither has Jetpack. Fortunately the WordPress.com feature is based on a freely available JS/CSS library, Syntax Highlighter by Alex Gorbatchev.
You can directly add this library to any web page under your control, or use a WordPress.org plugin for self-hosted WordPress blogs like this one. I’m using Syntax Highlighter MT by Megatome, a simple and transparent solution – just add a class to your <pre> tags. The official WordPress plugin defines new square-bracket shortcodes for each language which isn’t something I want or need.
Library Usage
Gorbatchev’s library defines a straightforward way to style code blocks which is also directly exposed by the Megatome plugin. As shown on the library’s installation page, simply add class="brush:java" to any <pre> tag you wish to style. Replace “java” with any of the numerous predefined brushes for other languages. The beauty of this solution is that you’ll still get a standard <pre> block on RSS readers or other displays that ignore JavaScript and/or CSS.
Aside from the language brush, coloring is determined by one of seven themes. You can also define your own themes but the default ones are quite pleasant. I’m currently using Eclipse which has a white background like Default, but whose decoration is an unobtrusive gray rather neon green.
Syntax Highlighter is clever enough to provide the original source code when copying & pasting out of the styled <pre> block, so your readers won’t get all the <span> tags used for styling. All told this is an excellent library with just one problem: the explicitly set font size is too big.
Font Size Fix
All supplied Syntax Highlighter themes reset the <pre> font size to 1em which is too big for my WordPress theme, or indeed for most layouts. Monospace fonts are usually set somewhat smaller than body text fonts – I’m using 0.875 (root) em on this blog. The effect would be more pronounced on layouts that shrink the body text font relative to the root em size. I suspect that’s what happens on those websites you may have seen whose code font looks impossibly big relative to the surrounding text.
I’m not sure why Gorbatchev sets the font size in the first place, but the fix is easy enough. Find the preinstalled theme files in themes/shCore*.css and delete all font-size lines from all of them, except for the 10px size used for the little question mark toolbar that shows Gorbatchev’s copyright notice. Now Syntax Highlighter will use whatever <pre> font size you’ve set in your main stylesheet.
2014-05-23: I found that Syntax Highlighter’s little question mark “toolbar” for the copyright notice blocks text visibility and selection when a line is wide enough to stretch under that toolbar. In the interest of my visitors I’ve added ,toolbar:false to the class selection described above.
Switching to Prism (2017-12-22)
After updating my WordPress theme to Twenty Sixteen, I discovered that the rather complex HTML constructs into which Syntax Highlighter translates its <pre> blocks no longer render correctly on mobile. Unfortunately the WordPress plugin has been abandoned, so I cannot recommend it any longer.
The replacement I eventually settled on is Prism.js, made available as a WordPress plugin by Jeff Starr’s Prismatic. The plugin is up-to-date and works well with everything I’ve tested. I did not find it necessary to tweak any code or indeed set any options other than selecting a theme. Functionality is otherwise quite similar to Syntax Highlighter MT, i.e. code in standard <pre><code> blocks is dynamically colorized on the client.