¿Cómo agrego una etiqueta previa dentro de una etiqueta de código con jQuery?
-
08-06-2019 - |
Pregunta
estoy tratando de usar jQuery
para formatear bloques de código, específicamente para agregar un <pre>
etiqueta dentro del <code>
etiqueta:
$(document).ready(function() {
$("code").wrapInner("<pre></pre>");
});
Firefox aplica el formato correctamente, pero IE coloca todo el bloque de código en una línea.Si agrego una alerta
alert($("code").html());
Veo que IE ha insertado texto adicional en la etiqueta previa:
<PRE jQuery1218834632572="null">
Si recargo la página, el número que sigue a jQuery cambia.
si uso wrap()
en lugar de wrapInner()
, para envolver el <pre>
afuera de <code>
etiqueta, tanto IE como Firefox la manejan correctamente.Pero no debería <pre>
trabajar adentro <code>
¿también?
preferiría usar wrapInner()
porque luego puedo agregar una clase CSS al <pre>
etiqueta para manejar todo el formato, pero si uso wrap()
, tengo que poner formato de página CSS en el <pre>
etiqueta y formato de texto/fuente en el <code>
etiqueta, o Firefox e IE se ahogan.No es gran cosa, pero me gustaría que fuera lo más simple posible.
¿Alguien más ha encontrado esto?¿Me estoy perdiendo de algo?
Solución
Esa es la diferencia entre bloque y en línea elementos. pre
es un elemento a nivel de bloque.No es legal ponerlo dentro de un code
etiqueta, que solo puede contener contenido en línea.
Debido a que los navegadores tienen que soportar cualquier horrible sopa de etiquetas que puedan encontrar en la web real, Firefox intenta hacer lo que usted quiere decir.IE lo maneja de manera diferente, lo cual está bien según la especificación;El comportamiento en ese caso no está especificado, porque nunca debería suceder.
- ¿Podrías en su lugar reemplazar el
code
elemento con elpre
?(Debido al problema del bloque/en línea, técnicamente eso solo debería funcionar si los elementos están dentro un elemento con contenido de "flujo", pero los navegadores pueden hacer lo que usted quiera de todos modos). - ¿Por qué es un
code
elemento en primer lugar, si quierespre
¿El comportamiento? - También podrías darle el
code
elementopre
Los espacios en blanco preservan el poder con el CSS.white-space: pre
, pero aparentemente IE 6 sólo respeta eso en modo estricto.
Otros consejos
Por cierto, no sé si está relacionado, pero las etiquetas previas dentro de las etiquetas de código no se validarán en modo estricto.
¿Estás utilizando la última versión de jQuery?¿Qué pasa si lo intentas?
$("code").wrapInner(document.createElement("pre"));
¿Es mejor o obtienes el mismo resultado?
Como indicó markpasc, un elemento PRE dentro del elemento CODE no está permitido en HTML.La mejor solución es cambiar su código HTML para usar <pre><code> (lo que significa un bloque preformateado que contiene código) directamente en su HTML para bloques de código.
Podrías usar html() para envolverlo:
$('code').each(function(i,e)
{
var self = $(e);
self.html('<pre>' + self.html() + '</pre>');
});
Como se mencionó anteriormente, sería mejor que cambiara su html.Pero esta solución debería funcionar.