20

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'を次のように置き換えると：

padding: 0 5px  !important;

番号付けはChromeで適切に機能するため（FirefoxとIEの表示に悪影響を与えることなく）、今のところブログではhttp://alexgorbatchev.com/pub/sh/current/styles/shCore.cssではなくカスタマイズされた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

これらのソリューションを機能させることができませんでした。ただし、この問題のコメントにより、解決策が得られました...

テンプレート エディター (html の編集) を開き、「13px」を検索しました。変数定義の近くに 2 つのインスタンスがありました。フォント サイズを 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

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.

于 2012-10-23T16:43:10.020 に答える