Fixing the SyntaxHighlighter Evolved WordPress plugin’s font-size issues with Fluid-Blue theme.

For WordPress, Fluid-Blue is a popular theme amongst the technical community because its intrinsically great for writing technical articles. For posting code, I use the SyntaxHighlighter Evolved plugin. The problem is that the CSS for the Fluid-Blue theme conflicts with the CSS for the plugin.

There are two main conflicts with the theme and plugin.

1. The syntax highlighter’s font size is too small
2. The syntax highlighter’s lines in the left gutter and code don’t line up

I came across this blog post by Matthew Turland, which talks about fixing the font-size, and it does, but it does not fix the second issue with the lines matching up. After looking into the problem, it turns out that there are other elements of the syntax highlighter that need their font sizes adjusted as well.

You can modify the theme stylesheet directly, but instead we are going to create a child theme. The reason for this is to abstract our changes away from the original theme so we don’t have to deal with so much CSS.

To do this, go to your WordPress themes folder on your FTP (wordpress_root/wp-content/themes/) where wordpress_root is your domain and root path to your WordPress directory. Create a new folder and call it fluid-blue-syntaxhighlighter. You can actually call this whatever you want, but the idea is to be consistent with naming where fluid-blue is the name of the theme we want to derive from, and syntaxhighlighter is just the name of the child theme.

Next, create a new css file named style.css and use the following code.

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

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

The CSS comment actually is a configuration section that does one simple thing; it tells WordPress the parent theme we are deriving from. Now we can apply the style fixes for the syntax highlighter plugin.

body .syntaxhighlighter a,
body .syntaxhighlighter div,
body .syntaxhighlighter code,
body .syntaxhighlighter table,
body .syntaxhighlighter table td,
body .syntaxhighlighter table tr,
body .syntaxhighlighter table tbody,
body .syntaxhighlighter table thead,
body .syntaxhighlighter table caption,
body .syntaxhighlighter textarea,
body .syntaxhighlighter .gutter {
    font-size: 12px !important;
    line-height: 13px !important;
}

Set the font-size to whatever you want it to be, and set the line-height to be either the same, or one pixel larger. I found that the alignment seemed to look the best with it increased by one pixel.

Now upload style.css to your child theme you created earlier.

The last step is to actually activate the theme. Go to your WordPress Appearance section, and click ‘Activate’ on your child theme. If your child theme does not appear, then you may not have created it in the correct location on your FTP.