WordPress SyntaxHighlighter 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.

4 Comments

  1. Julien says:

    This didn’t work for me, but .syntaxhighlighter .code (code as class name, not as element type) did. Thanks!

  2. @Julien Thanks for the comment! Glad the post was at least semi-helpful. :)

  3. Do you have any idea how to style a fix for the Title for the SyntaxHighlighter? V3 of the highlighter supports titles (has one by default that is the language name), and its still a small font.

  4. I was able to get it by doing the following:

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

    Thanks for the helpful blog post!