Getting syntax highlighting plugins to work correctly with certain WordPress themes

Happy April 1st! Note however that this is serious content; in my country we celebrate fools day the 28th December instead

If you’re running a WordPress blog, some themes – including the one used in this blog, which is Gear theme – might give you headaches when using syntax highlighting plugins (namely, plugins for showing source code in a well-organized and nicely formatted way). The problem? The code displayed is completely messed up. As far as I know, this happens with different plugins, and all of them are based on Alex Gorbatchev’s syntax highlighter.

Help! This doesn't work! (click to enlarge)

I will explain how to easily solve the problem with the Gear theme, but it might very well be the same solution with other themes experiencing similar problems. This theme is actually one of the most popular ones for WP, so I’m sure I was not the only one who experienced them (yes, I had the problem with my blog too…), but many other WP users as well, when they use syntax highlighting plugins.

The source of the problem is CSS. The stylesheet for the theme conflicts with the one for the highlighter plugin, concretely when styling the <code> tags. This can be easily deduced when carefully looking the messed up code, and comparing what you see with its source code. The fix is therefore quite easy: you need to disable the conflicting piece of code from the theme stylesheet.

For Gears theme this is done as follows:

1. Open wp-content/themes/gear/style.css
2. Find the following piece of code, near line 441:

   code {
    display: block;
    margin: 0 1.5em 1.25em 1.5em;
   }

3. Comment it out, so it is disabled. It should look like this:

   /*
   code {
    display: block;
    margin: 0 1.5em 1.25em 1.5em;
   }
   */

That looks better (click to enlarge)

And that was it. If you ever stop using highlighting plugins or for whatever other reason need to reverse the stylesheet code back to the original settings, then just uncomment the snippet of code.

After applying this fix your syntax highlighting plugin should display the code much, much better

Happy blogging…

PD: If you don’t have a syntax highlighter plugin yet and you’re looking for one, I recommend you the one by Viper007Bond.