Líneas adicionales usando SyntaxHighlighter para Chrome solamente?

Question

Se están insertando líneas adicionales cuando estoy usando Chrome para mirar un borrador de publicación de blog (en blogger) que usa resaltador de sintaxis, p.

Pero en IE se ve bien:

Alguna idea de lo que estoy haciendo mal aquí?

edición:

La configuración/instalación para SyntaxHighlighter estoy usando es el siguiente:

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

edición:

Y el código HTML generado es:

<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

Tener la el mismo problema; que parece ser causado por esta sección del archivo shCore.css:

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

Si se sustituye la 'padding' con:

padding: 0 5px !important; 

La numeración funciona correctamente en Chrome (sin que ello afecte negativamente a Firefox y IE muestra) así que por ahora tengo mi blog a un señalador shCore.css personalizado en lugar de http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

Answer 2

Pega antes <pre class="brush: js;">

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

Answer 3

No es necesario hacer referencia a un archivo CSS diferente. Pegue el siguiente bloque de estilo después de la etiqueta de enlace que hace referencia a 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 añade 5 píxeles de relleno horizontal alrededor de cada número de línea.

.syntaxhighlighter table td.code .line elimina todo el relleno de la línea de código.

.syntaxhighlighter .gutter agrega 1 em de relleno entre la cuneta y la línea de código.

.syntaxhighlighter table resuelve un problema de desbordamiento que estaba viendo con Chrome. Para los bloques de código que se desbordaban horizontalmente, Chrome representaba una barra de desplazamiento vertical que se podía desplazar 1 píxel. Al agregar 1 píxel de relleno a la tabla dentro del contenedor div, se solucionó.

Answer 4

No pude lograr que ninguna de estas soluciones funcionara. Sin embargo, un comentario en this issue me dio la solución ...

inaugurado el editor de plantillas (edición de HTML), y buscó '13px'. Hubo dos instancias cerca de las definiciones de las variables. Actualicé el tamaño de fuente a 12px, y todo funcionó.

 <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

Tiene el mismo problema con blogger.com y el último Firefox.
Descubrí que sucede debido a la superposición de estilos en la clase .container, por lo que básicamente debe cambiar el nombre de clase a algo como .containerSH en SyntaxHighlighter.
Ver mi commit: change .container -> .containerSH
Ahora funciona bien para mí.