20

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.

Chrome extra lines inserted

But on IE it looks fine:

IE 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>
glosrob
  • 6,631
  • 4
  • 43
  • 73

5 Answers5

21

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

Jane
  • 324
  • 2
  • 5
  • Yeah I found that if I pointed to the 2.1 version, it was fixed too. I shall try the customised version, thanks! – glosrob Aug 07 '12 at 17:29
  • I'm also facing the same problem with chrome – srk Aug 09 '12 at 17:03
  • 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 – glosrob Aug 09 '12 at 21:31
  • 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? – atconway Aug 14 '12 at 19:15
  • 11
    @atconway I have edited the CSS file as jane said and hosted here http://codeoncloud.co.cc/shCore.css This may helpful to you – Grant Aug 15 '12 at 08:47
  • 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. – NathanAldenSr Oct 23 '12 at 16:11
3

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

<style>
    .syntaxhighlighter table td.gutter .line {
        padding: 0 !important;
    }
</style>
Mihai Iorga
  • 39,330
  • 16
  • 106
  • 107
Roman
  • 31
  • 1
0

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.

NathanAldenSr
  • 7,841
  • 4
  • 40
  • 51
0

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"/>
cloggins
  • 659
  • 3
  • 16
0

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.

Daniil Satsura
  • 1