Extra Lines che utilizzano SyntaxHighlighter solo per Chrome?

Question

Quando si utilizza Chrome, vengono aggiunte righe aggiuntive per esaminare un post del blog in bozza (su blogger) che utilizza l'evidenziatore della sintassi, ad es.

Ma su IE si guarda bene:

Tutte le idee che cosa sto facendo male qui?

edit:

Il config/setup per SyntaxHighlighter sto usando è qui sotto:

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

edit:

E l'HTML generato è:

<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

Avere la stesso problema; sembra essere causata da questa sezione del file shCore.css:

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

Se si sostituisce la 'padding' con:

padding: 0 5px !important; 

La numerazione funziona correttamente in Chrome (senza influire negativamente Firefox e display IE) quindi per ora ho il mio blog che punta a uno shCore.css personalizzato piuttosto che http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

Answer 2

pasta prima <pre class="brush: js;">

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

Answer 3

Non è necessario fare riferimento a un file CSS diverso. Incollare il seguente blocco di stile dopo il tag link che fa riferimento 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 aggiunge 5 pixel di padding orizzontale attorno ad ogni numero di riga.

.syntaxhighlighter table td.code .line rimuove tutto il riempimento dalla riga di codice stesso.

.syntaxhighlighter .gutter aggiunge 1 em di padding tra la grondaia e la riga di codice.

.syntaxhighlighter table risolve un problema di overflow che stavo vedendo con Chrome. Per i blocchi di codice che erano inondati orizzontalmente, Chrome eseguiva il rendering di una barra di scorrimento verticale che poteva essere scrollata di 1 pixel. L'aggiunta di 1 pixel di padding alla tabella all'interno del contenitore div lo ha risolto.

Answer 4

Non sono riuscito a far funzionare nessuna di queste soluzioni. Tuttavia, un commento in this issue mi ha dato la soluzione ...

Aperto l'editor di modelli (modifica html) e cercato '13px'. C'erano due istanze vicino alle definizioni delle variabili. Ho aggiornato la dimensione del carattere a 12px e tutto ha funzionato.

 <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

Ha avuto lo stesso problema con il blogger.com e l'ultimo Firefox.
Ho scoperto che succede a causa di stili sovrapposti sulla classe .container, quindi in pratica è necessario rinominare la classe in qualcosa come .containerSH in SyntaxHighlighter.
Vedere il mio commit: change .container -> .containerSH
Ora funziona bene per me.