SyntaxHighlighter and Bootstrap – line number alignment problem

I’m a fan of Alex Gorbatchev’s SyntaxHighlighter, which provides an easy way to include syntax highlighting in web pages.

I noticed that when using it in conjunction with the Bootstrap, that the line numbers appeared to be misaligned – here’s an example:

Misaligned line numbers

I had a look on the web, and found a solution via SyntaxHighter’s GitHub page, on an issue post about Lines misaligned with numbers.

The fix involves adding this CSS:

.syntaxhighlighter table td.gutter {
    vertical-align: middle !important;

As provided by Robert Butler.

Once applied, the issue was fixed:

Leave a Comment

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