额外的线路SyntaxHighlighter的使用Chrome浏览器而已?(Extra Lines

2019-07-30 19:24发布

当我使用Chrome浏览器看一下使用语法高亮如博客草稿后(上博客)额外线被插入

但在IE浏览器,它看起来罚款:

任何想法,我做错了什么?

编辑:

配置/设置为我用的是SyntaxHighlighter的下面:

<!-- 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 -->

编辑:

而生成的HTML是:

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

Answer 1:

有同样的问题; 它似乎在shCore.css文件的这部分原因引起:

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

如果我取代“填充”有:

padding: 0 5px  !important;

编号工作正常在Chrome(不产生负面影响Firefox和IE显示),所以现在我有我的博客指向定制shCore.css而非http://alexgorbatchev.com/pub/sh/current/styles/shCore.css



Answer 2:

之前粘贴<pre class="brush: js;">

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


Answer 3:

没有必要引用一个不同的CSS文件。 粘贴引用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增加了围绕每个行号水平填补5个像素。

.syntaxhighlighter table td.code .line去除的代码本身的线的所有填充。

.syntaxhighlighter .gutter加1个EM檐槽和代码行之间的填充。

.syntaxhighlighter table解决了一个溢出的问题我用Chrome上看到。 对于水平溢出代码块,铬被呈现垂直滚动条,可以被滚动1个像素。 添加填充的1个像素到表内的div容器固定它。



Answer 4:

我不能让任何这些解决方案的工作。 然而,在评论这个问题给我的解决方案...

打开模板编辑器(编辑HTML),并寻找“13像素”。 有附近的变量定义两个实例。 我更新了字体大小为12像素,和一切工作。

     <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:

得到了相同的问题与blogger.com和最新的Firefox。
我发现,这是因为上重叠的类样式的.container ,所以基本上你不得不类重命名为类似.containerSH在SyntaxHighlighter的。
见我的承诺:改变.container - > .containerSH
现在,它的作品确定为我。



文章来源: Extra Lines using SyntaxHighlighter for Chrome Only?