SyntaxHighlighter margin bug with bootstrap?

Question

I have this code.

<pre class="brush: xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;Test xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns:xsd=&quot;http://www.w3.org/2001/XMLSchema&quot;&gt;
    &lt;ABC&gt;
      &lt;A&gt;B&lt;/A&gt;
    &lt;/ABC&gt;
&lt;/Test&gt;</pre>

And this javascript.

<script type="text/javascript">SyntaxHighlighter.all();</script>

Before that I loaded:

• XRegExp.js
• shCore.js
• shBrushXml.js

And the css:

• shCoreRDark.css
• shThemeRDark.css

But it looks like:

The problem is that the first line is between line 1 and 2. The margin issnt correct or something else!? I dont know. With FireBug I cant find the problem :(

And by the way... Is it possible to disable/hide the "?" button on the top right corner?

Fiddle example (bad parsing!?): http://jsfiddle.net/Zrm2G/

Answer 1

I believe the issue has to do with the SyntaxHighlighter using class="container" which has a name collision with BootStrap.

In particular, bootstrap.css adds the following, which is putting the margin in before our displayable content:

.container:before, .container:after {
    display: table;
    content: "";
    line-height: 0;
}

I resolved this by overriding this css in my sites main css file when the container class is used within the SyntaxHighlighter table:

.syntaxhighlighter table .container:before {
    display: none !important;
}