Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extra Lines using SyntaxHighlighter for Chrome Only?

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>
like image 478
glosrob Avatar asked Aug 04 '12 00:08

glosrob


2 Answers

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

like image 140
Jane Avatar answered Oct 18 '22 08:10

Jane


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

<style>
    .syntaxhighlighter table td.gutter .line {
        padding: 0 !important;
    }
</style>
like image 37
Roman Avatar answered Oct 18 '22 07:10

Roman