2012-08-04 24 views
20

Sözdizimi vurgulayıcıyı kullanan bir taslak blog yayınına (blog yazarı) bakmak için Chrome'u kullanırken ek satırlar ekleniyor. Yalnızca Chrome için SyntaxHighlighter'ı Kullanan Ekstra Satırlar?

Chrome extra lines inserted

Ama IE ince görünür: Yanlış burada ne aradığımı

herhangi bir fikir

IE looks fine

?

düzenleme:

kullanıyorum SyntaxHighlighter için config/kurulum aşağıdaki gibidir:

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

düzenleme:

Ve oluşturulan HTML geçerli: Having

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

cevap

21

aynı sorun; olumsuz Firefox'u ve etkilemeden

padding: 0 5px !important; 

numaralandırma (Chrome'da düzgün çalışır: Birlikte 'dolgu' değiştirin

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

: o shCore.css dosyasının bu bölümünde kaynaklanabilir görünmektedir IE görüntüler) yani şimdi özelleştirilmiş shCore.css için bloguma işaret var için yerine http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

+0

Evet, 2.1 sürümüne işaret ettiğimde, bunun da düzeltildiğini buldum. Özelleştirilmiş sürümü deneyeceğim, teşekkürler! – glosrob

+0

Ben de aynı sorunla karşı karşıyayım chrome – srk

+0

Özelleştirilmiş komut ^^ benim için çalıştı. Ayrıca, isterseniz, 2.1 sürümüne bağlantı ve FF, IE ve Chrome genelinde – glosrob

3

Yapıştır <pre class="brush: js;">

önce
0

Farklı bir CSS dosyasına başvurmaya gerek yoktur. shCore.css başvuran bağlantı etiketi sonra aşağıdaki stil bloğunu yapıştırın:

<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 her satır numarasına etrafında yatay dolgu 5 piksel ekler. Tüm dolguları kod satırından kaldırır.

.syntaxhighlighter .gutter oluğu ve kod satırına arasındaki doldurma 1 em ekler. .syntaxhighlighter table Bir taşma sorununu çözer Chrome ile görüşüyordum. Yatay olarak taşan kod blokları için Chrome, 1 pikselde kaydırılabilen dikey bir kaydırma çubuğu oluşturuyordu. kapsayıcı div sabit tablo içinde için doldurma 1 piksel ekleme.

0

Bu çözümlerden hiçbirini işe yaramadı. Ancak, bir yorum this issue bana verdi ...

Şablon düzenleyicisi (düzenleme html) açıldı ve '13px' için aranıyor. Değişken tanımlarına yakın iki örnek vardı. Yazı tipi boyutunu 12px olarak güncelledim ve her şey çalıştı.

 <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"/> 
0

Blogger ile aynı sorunu yaşıyorum.com ve en yeni Firefox.
Sınıfın .container sınıfındaki örtüşen stilleri nedeniyle gerçekleştiğini anladım. Bu nedenle, temel olarak sınıfı SyntaxHighlighter'de .containerSH gibi bir şeye yeniden adlandırmanız gerekiyor.
commit: change .container -> .containerSH
Benim görüşüme bakın.

İlgili konular