WordPress SyntaxHighlight Font Size Fix

Published in PHP, Content Management on Feb 13, 2012

I use WordPress for this web site. To pretty up source code examples in my posts, I use the excellent SyntaxHighlighter Evolved WordPress plugin. The WordPress theme I use, Fluid Blue, does something with its CSS such that it and SyntaxHighlighter appear to conflict. The result is that source code examples processed by the plugin are displayed with a font size that's too small to read comfortably.

In doing some digging, I learned about the child themes feature of WordPress, which allows you to effectively extend an existing theme. I created a directory under wp-content/themes called fluid-blue-custom. In this directory, I created a styles.css file with these contents:

/*
Theme Name: Fluid Blue (Custom)
Template: fluid-blue
*/

@import url("../fluid-blue/style.css");

body .syntaxhighlighter code,
body .syntaxhighlighter .gutter {
    font-size: 12px !important;
}

The Template line of the comment block indicates that this theme is a child theme of the existing Fluid Blue theme that resides in the wp-content/themes/fluid-blue directory. The @import line pulls in the styles.css file from that directory, after which I can apply any CSS overrides I like. The last line is a CSS rule specific enough to override applicable rules from the parent theme in order to increase the font size to something more easily readable.

It appears I'm not the only one who's encountered this issue, so I hope this post helps someone else.