WordPress SyntaxHighlight Font Size Fix
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.