20

当我使用 Chrome 查看使用语法荧光笔的草稿博客文章（在博客上）时，正在插入额外的行，例如

插入了 Chrome 多余的行

但在 IE 上看起来不错：

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

5 回答 5

21

有同样的问题；它似乎是由 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

于 2012-08-07T16:15:57.640 回答
3

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

<style>
    .syntaxhighlighter table td.gutter .line {
        padding: 0 !important;
    }
</style>
于 2012-08-28T16:07:02.360 回答
0

无需引用不同的 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 中看到的溢出问题。对于水平溢出的代码块，Chrome 正在渲染一个可以滚动 1 个像素的垂直滚动条。在容器 div 内的表格中添加 1 个像素的填充来修复它。

于 2012-10-23T16:43:10.020 回答
0

我无法让这些解决方案中的任何一个起作用。但是，这个问题的评论给了我解决方案......

打开模板编辑器（编辑 html），并搜索“13px”。变量定义附近有两个实例。我将字体大小更新为 12px，一切正常。

     <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"/>
于 2012-10-24T19:01:52.223 回答
0

blogger.com 和最新的 Firefox 也有同样的问题。
我发现这是因为 class 上的样式重叠而发生的.container，所以基本上你必须将 class 重命名为.containerSHSyntaxHighlighter 中的名称。
查看我的提交：更改 .container -> .containerSH
现在它对我来说没问题。

于 2015-10-09T09:24:54.207 回答