Bootstrap 3 conflicts

Hi,

Thanks for the project, very cool!

I used it in combination with Bootstrap 3, and had to add the following CSS rules to get it to show correctly:

pre, code {
    background: #f8f8ff;
    font-family: monospace;
}

The background color here is not really important (it’s the github theme), the thing is bootstrap applies a background to the <pre> and highlight.js to the <code>, so we can see a bit of the <pre> and its different background color.

I didn’t do a pull request because maybe that has already been discussed.

[isagalaev]

Hi,

First, a thing to note: in a recent change we now apply the ‘hljs’ class to the container holding the code and all our stylesheets now refer to .hljs rather than pre code.

Anyway, since we try not to tie highlighting to any particular container markup, it is expected that you might need some “integration” styling to have code blocks look nice in your site’s stylesheet. From the point of view of a highlighting library we just can’t know which pre-existing rules to take into account.

Does that make sense? (My English feels awkward today 😃 )

[isagalaev]

maybe not styling the <pre> but just those two:

pre code, .hljs { background: ...; }

But this way we’re back to the problem that started the thread 😃

To sum this up, we’re aware of the problem that a site style setting a background to <pre> may not work beautifully out of the box with highlight.js. We don’t have an immediate solution for this without causing other regressions, so for now we consider writing a bit of glue code in CSS a recommended workaround.

Closing the issue until a better solution comes up.