Yet Another SyntaxHighlighter 3.x Tweak

syntaxhighlighter-evolved-225x225One day I was casually admiring one of my programming blogs in a Google Chrome mobile browser when I noticed a problem in the pre-formatted sections of the blog. The line numbers and corresponding source code lines were offset. Since I use SyntaxHighlighter, I was sure the problem could be corrected by tweaking one of this plugin’s CSS files.

I’ve talked about tweaks you can use to customize SyntaxHighlighter 3.x and I’m back with another that will help you deal with the misalignment issue so your syntaxhighlighted sections will look pretty as a picture in Google Chrome, Safari and other mobile browsers.

Here’s the Deal

Numbered lines in SyntaxHighlighter sections have two columns, one with the line numbers and the other that contain the content of each line. On most desktop browsers you will see the lines in both columns coincide nicely. But when you load these pages into mobile browsers you’ll observe that the lines in either column are offset from each. Here’s what this situation looks like:

lines offset

The problem is caused by the high of line in the right hand column are slightly larger than the lines containing the line numbers. You don’t notice the difference in the first 5 lines or so but it the pre-formatted sections have more than 5 lines, the offset is pronounced.

I’ve observed this issue mostly in Google Chrome and Safari mobile browsers but also Google Chrome for a desktop system running CentOS (Linux).

Let’s Hack Some More CSS

As in previous WordPress tweaks, you can eliminate this problem by editing the shCore.css file contained in wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/ directory. Open this file in your WordPress installation then add line 19 and comment out line 20 in syntaxhighlighter set of CSS classes at the top like this:

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1em !important; 
  /*line-height: 1.1em !important; */ 
  margin: 0 !important;
  outline: 0 !important;

This will reduce the height of lines in the right hand column by 0.1 so they match the height of the line numbers. Since I’m using the tweak for this blog, you can already see from this example code that the lines with numbers and code content align properly. And here’s what the previous example looks like after saving the CSS file and reloading the page in the browser:

lines line up

So if you use SyntaxHighlighter like me, give this tweak a try and your pre-formatted sections with line numbers should look perfect in any browser, desktop or mobile.


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 *