search

tmont / sunlight

Client-side syntax highlighter
http://sunlightjs.com
Do What The F*ck You Want To Public License
60 stars 26 forks source link

If a page already has CSS that alters the line-height of <pre> elements, Sunlight's CSS breaks, causing line numbers to be mis-aligned from the source code. #1

Closed austinhappel closed 11 years ago

austinhappel commented 11 years ago

Hey there, first, I want to say thanks for the great project. It comes for free with docstrap which is where I caught this bug.

The bug The crux of the issue is this: when I have CSS on my page that alters the line-height of a <pre> element like this:


pre {
    line-height: 20px;
}

The line numbers (using the line numbers plugin) become mis-aligned from the highlighted source code.

Here is an example of the issue (using the source code from one of your tests): http://jsfiddle.net/austinhappel/8NZH2/6/

The fix Simply adding an additional selector to line 14 of both css files fixes the issue. See here: http://jsfiddle.net/austinhappel/JEYZa/

I've already implemented a fix in my fork, and I'll submit a pull request momentarily...

austinhappel commented 11 years ago

Note that twitter bootstrap alters the line-height of pre tags, so this technically could be an issue for anyone using Sunshine in conjunction with Bootstrap - (i.e. docstrap)