Chrome 전용 SyntaxHighlighter를 사용하는 보조 라인?

Question

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

같은 문제. 부정적인 파이어 폭스와 영향을주지 않고

padding: 0 5px !important; 

번호 매기기 (크롬에서 제대로 작동합니다 내가 가진 '패딩'을 교체 할 경우

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

: shCore.css 파일의이 섹션에 의해 야기 될 것으로 보인다 IE 표시) 그래서 지금은 사용자 정의 shCore.css 내 블로그 포인팅을위한 것이 아니라 http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

Answer 2

붙여 넣기 <pre class="brush: js;">

이전

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 개의 공백을 추가합니다.

.syntaxhighlighter table은 Chrome에서보고 있던 오버플로 문제를 해결합니다. 가로로 오버플로 된 코드 블록의 경우 Chrome은 1 픽셀 스크롤 할 수있는 세로 스크롤 막대를 렌더링하고있었습니다. 컨테이너 안의 테이블에 1 픽셀의 패딩을 추가하면 고정됩니다.

Answer 4

이러한 솔루션을 사용할 수 없습니다. 그러나 this issue에 대한 의견은 저에게 해결책을주었습니다 ...

템플릿 편집기 (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"/> 

Answer 5

블로거와 동일한 문제가 있습니다.co.kr 및 최신 Firefox.
클래스 .container에 스타일이 겹쳐서 발생한다는 것을 알았습니다. 기본적으로 클래스 이름을 SyntaxHighlighter에서 .containerSH과 같은 이름으로 변경해야합니다.
내 commit: change .container -> .containerSH
보기 이제 괜찮습니다.