¿Cómo agrego una etiqueta previa dentro de una etiqueta de código con jQuery?

Question

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?

Answer 1

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 el pre?(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 quieres pre¿El comportamiento?
• También podrías darle el code elemento preLos espacios en blanco preservan el poder con el CSS. white-space: pre, pero aparentemente IE 6 sólo respeta eso en modo estricto.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.