WordPress SyntaxHighlighter 3.x Tweaks

wordpress-syntaxhighlight-225x225I’ve been experimenting with some of the great plugins that exist to improve the look and feel of WordPress based websites. One of my favorites is SyntaxHighligher by Alex Gorbatchev that enables you to add line numbers to and alternately color lines within pre-formatted text blocks. I write articles on programming that contain lots of example code, so these features really help to make the code stand out and easy to reference by line.


Version 3.x Problems

Of the two supported versions of SyntaxHighlighter – 2.x and 3.x – I strongly prefer 3.x since it provides scrollbars for lines that are too wide to fit into the text boxes in which they are displayed. However SyntaxHighlighter 3.x lacks the following features out of the box that 2.x provides:

  1. Alternating color rows. All the rows in 3.x are white, so it is harder to see which lines correspond to what numbers.
  2. Text boxes lack an outer border making them look somewhat primitive.
  3. There is no bottom margin on the text boxes giving the appearance that the pre-formatted box is sitting right on top of the text that follows them. The healthy margin at the top of 3.x text boxes only makes the illusion more pronounced.

These problems can be corrected with a couple of simple tweaks to the 3.x CSS style sheet.

Let’s Hack Some CSS

SyntaxHighlighter provides several color themes each of which has its own set of CSS files. Note that the tweaks I describe in this section have to be done to each theme separately. I really like the default SyntaxHighlighter so my discussion will use the CSS for that theme.

Both tweaks involve the shThemesDefault.css file which you can find in the wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles directory of your WordPress installation. Open the file in your favorite editor then find the .syntaxhighlighter .line.alt2 section. Change the background-color to #f2f2f2 or some other color that you want. This will set every other row to the color you specify which alternates with white rows.

.syntaxhighlighter .line.alt2 {
  background-color: #f2f2f2 !important;

Now for the bottom margin and border. In the same file go to the .syntaxhighlighter section. Add border and margin-bottom fields as shown in lines 3 and 4 respectfully as shown below.

.syntaxhighlighter {
  background-color: white !important;
  border: 1px solid #DADAD9 !important;
  margin-bottom: 20px !important;

With this color scheme highlighted text is grey which does not stand out so well with the light grey lines. I prefer to use a light periwinkle shade which you can set by changing this block:

.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #D4DDF8 !important;

Save the flle. That’s all there is to it. You can experiment with these values to the get the right colors, line styles and margin size.


Article by Vic Hargrave

Software developer, blogger and family man enjoying life one cup of coffee at a time. I like programming and writing articles on tech topics. And yeah, I like coffee.


Leave a Reply

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