internet explorer - ¿Líneas adicionales usando SyntaxHighlighter solo para Chrome?
internet-explorer google-chrome (5)
Se están insertando líneas adicionales cuando estoy usando Chrome para ver una publicación de blog borrador (en blogger) que usa resaltador de sintaxis, por ejemplo
Pero en IE se ve bien:
¿Alguna idea de lo que estoy haciendo mal aquí?
editar:
La configuración / configuración de SyntaxHighlighter que estoy usando está a continuación:
<!-- 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 -->
editar:
Y el 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>
No hay necesidad de 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 agrega 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 en sí.
.syntaxhighlighter .gutter agrega 1 em de relleno entre el canal 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 desbordaron horizontalmente, Chrome representaba una barra de desplazamiento vertical que podía desplazarse 1 píxel. La adición de 1 píxel de relleno a la mesa dentro del contenedor div lo arregló.
No pude conseguir que ninguna de estas soluciones funcionara. Sin embargo, un comentario en este número me dio la solución ...
Abrió el editor de plantillas (editando html) y buscó ''13px''. Hubo dos instancias cerca de las definiciones de variables. Actualicé el tamaño de la 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"/>
Pegar antes de <pre class="brush: js;">
<style>
.syntaxhighlighter table td.gutter .line {
padding: 0 !important;
}
</style>
Teniendo el mismo problema; 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 sustituyo el ''relleno'' con:
padding: 0 5px !important;
La numeración funciona correctamente en Chrome (sin afectar negativamente a las pantallas de Firefox e IE) así que por ahora tengo mi blog apuntando a un shCore.css personalizado en lugar de http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
Tiene el mismo problema con blogger.com y la última versión de Firefox.
Descubrí que sucede debido a la superposición de estilos en la clase .container , así que básicamente tienes que cambiar el nombre de clase a algo como .containerSH en SyntaxHighlighter.
Ver mi compromiso: cambiar .container -> .containerSH
Ahora funciona bien para mí.