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.

But on IE it looks fine:

Any ideas what I am doing wrong here?

edit:

The config/setup for SyntaxHighlighter I am using is below:

<!-- Syntax Highlighter Additions START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushcsharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

edit:

And the HTML generated is:

<pre class="brush: csharp;">using System;
<br />using System.Text;
<br />using System.Collections.Generic;
<br />using System.Linq;
<br />using Microsoft.VisualStudio.TestTools.UnitTesting;
<br />using AccountTypeFollowUp;
<br />
<br />namespace PluginsUnitTests
<br />{
<br />    [TestClass]
<br />    public class AccountTypeFollowUpTests
<br />    {
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Supplier()
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Client()
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />
<br />        [TestMethod]
<br />        public void AccountTypeFollowUp_Account_Is_Other)
<br />        {
<br />            throw new NotImplementedException();
<br />        }
<br />    }
<br />}
<br /></pre>

Goblin

Answer 1

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

Overcharge

Yeah I found that if I pointed to the 2.1 version, it was fixed too. I shall try the customised version, thanks! – Goblin

I'm also facing the same problem with chrome – Sackbut

Customised script ^^ worked for me. Also, if you prefer, link to the 2.1 version and it works across FF, IE and Chrome for me – Goblin

I've had trouble finding a place to host the custom CSS file. SkyDrive and DropBox links didn't work well for me. Anyone have a link to the 2.1 version of this file? – Countess

@Countess I have edited the CSS file as jane said and hosted here codeoncloud.co.cc/shCore.css This may helpful to you – Simplehearted

While this did improve the line numbering, I still have problems with the longest lines having their last characters wrapped to the next line, screwing up the line-numbering at the bottom of the code snippet. – Burchfield

Answer 2

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

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

Salientian

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.

Burchfield

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"/>

Kinder

Answer 5

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.

Pyrotechnic