Skip to content

Changing the default style of the Syntaxhighlighter WordPress plugin

With this being a blog about software development and coding, I knew I needed an easy-to-use, established, and well-implemented WordPress plugin to display code snippets and highlight important lines. After trying a few, the popular Syntaxhighlighter was the winner in my eyes.

There was a problem though. For the Syntaxhighlighter themes I liked, the default text sizes were so large that I wouldn’t be able to display much code in a single line given the WordPress theme and post settings I prefer. In fact, the size of the text exceeded that of the blog content itself.

As an example, this is how my previous post about testing for an empty record variable in PostgreSQL looked with the default Syntaxhighlighter theme setting:

Syntaxhighlighter default text size too big
Code snippet text is larger than post content text. Looks weird to me.

Notice how with proper code indentation, the default text size limits what can be seen on a single line and a huge scrollbar gets introduced as a result.

I did some Googling and came across a solution to this issue here, however I’m not a fan of editing style sheets bundled with plugins or applications unless absolutely necessary. CSS allows you to take a more additive approach and put your custom styling in a separate file. I’m using the popular Author theme for WordPress, and adding custom CSS is a breeze:

  • From the WordPress Dashboard, go to Appearance –> Customize
Customize Appearance menu
  • Click on Additional CSS at the bottom
Additional CSS menu

Now you can add any CSS you’d like. Here’s how I’m modifying the default text size:

div.syntaxhighlighter {
  font-size: 12px !important;
}

Note the use of div.syntaxhighlighter (instead of just .syntaxhighlighter) and the use of !important. I prefer to use higher specificity to override styles instead of using !important, but in this case I needed to use both.

How did I know to apply styling changes to the div.syntaxhighlighter class? Here’s a screenshot from Chrome Developer Tools:

Inspecting the Syntaxhighlighter element using Chrome Developer Tools
Inspecting the Syntaxhighlighter element using Chrome Developer Tools
Published inTips & Tricks

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *