Extra Lines using SyntaxHighlighter for Chrome Only?

Question

Extra lines are being inserted when I am using Chrome to look at a draft blog post (on blogger) that uses syntax highlighter e.g.

Answer 1

Got the same issue with blogger.com and latest Firefox.
I found that it happens because of overlapping styles on class .container, so basically you have to rename class to something like .containerSH in SyntaxHighlighter.
See my commit: change .container -> .containerSH
Now it works ok for me.

Answer 2

Having the same problem; it appears to be caused by this section of the shCore.css file:

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.5em 0 1em !important;
}

If I replace the 'padding' with:

padding: 0 5px  !important;

The numbering works properly in Chrome (without negatively affecting Firefox and IE displays) so for now I have my blog pointing to a customized shCore.css rather than http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

Answer 3

There is no need to reference a different CSS file. Paste the following style block after the link tag that references shCore.css:

<style>
  .syntaxhighlighter table td.gutter .line {
    padding: 0 5px !important;
  }
  .syntaxhighlighter table td.code .line {
    padding: 0 !important;
  }
  .syntaxhighlighter .gutter {
    padding-right: 1em !important;
  }
  .syntaxhighlighter table {
    padding-bottom: 1px !important;
  }
</style>

.syntaxhighlighter table td.gutter .line adds 5 pixels of horizontal padding around each line number.

.syntaxhighlighter table td.code .line removes all padding from the line of code itself.

.syntaxhighlighter .gutter adds 1 em of padding between the gutter and the line of code.

.syntaxhighlighter table solves an overflow problem I was seeing with Chrome. For code blocks that overflowed horizontally, Chrome was rendering a vertical scrollbar that could be scrolled 1 pixel. Adding 1 pixel of padding to the table inside the container div fixed it.

Answer 4

I couldn't get any of these solutions to work. However, a comment in this issue gave me the solution...

Opened the template editor (editing html), and searched for '13px'. There were two instances near the variable definitions. I updated the font size to 12px, and everything worked.

     <Variable name="body.font" description="Font" type="font"
     default="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal **12px** Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

Answer 5

Paste before <pre class="brush: js;">

<style>
    .syntaxhighlighter table td.gutter .line {
        padding: 0 !important;
    }
</style>