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

Question

estoy tratando de utilizar jQuery para dar formato a los bloques de código, específicamente para agregar una etiqueta dentro de la etiqueta <pre><code>:

$(document).ready(function() { 
    $("code").wrapInner("<pre></pre>"); 
}); 

Firefox aplica el formato correctamente, pero IE pone el bloque de código en una sola línea. Si añado una alerta

alert($("code").html()); 

veo que IE ha insertado un texto adicional en la etiqueta pre:

<PRE jQuery1218834632572="null"> 

Si vuelvo a cargar la página, el siguiente número de cambios de jQuery.

Si uso wrap() en lugar de wrapInner(), para envolver el <pre> fuera de la etiqueta <code>, tanto en IE y Firefox manejan correctamente. ¿Pero no debería <pre> trabajar dentro de<code> también?

preferiría utilizar wrapInner() porque entonces puedo agregar una clase CSS para la etiqueta <pre> para manejar todo el formato, pero si uso wrap(), tengo que poner CSS formato de página en la etiqueta <pre> y formato de texto/font en la etiqueta <code>, o Firefox e IE ambos se ahogan. No es un gran problema, pero me gustaría mantenerlo lo más simple posible.

¿Alguien más ha encontrado esto? ¿Me estoy perdiendo de algo?

Answer 1

Esa es la diferencia entre block and inline elementos. pre is a block level element. No es legal ponerlo dentro de una etiqueta code, que can only contain inline content.

Debido a que los navegadores tienen que admitir cualquier sopa de etiquetas godawful que puedan encontrar en la web real, Firefox intenta hacer lo que usted quiere decir. IE pasa a manejarlo de manera diferente, lo que está bien por la especificación; el comportamiento en ese caso no está especificado, porque nunca debería suceder.

• Podría lugar sustituir el elemento code con el pre? (Debido al problema de bloque/línea, técnicamente eso solo debería funcionar si los elementos están dentro de an element with "flow" content, pero los navegadores pueden hacer lo que quieras de todos modos.)
• Por qué es un elemento code en primer lugar, si quieres pre ¿Comportamiento?
• También podría proporcionar code elemento pre 's que conserva poder en blanco con CSS white-space: pre, pero aparentemente IE 6 only honors that in Strict Mode.

Answer 2

¿Está utilizando el último jQuery? ¿Qué pasa si se intenta

$("code").wrapInner(document.createElement("pre")); 

¿Es mejor o se puede conseguir el mismo resultado?

Answer 3

Btw No sé si está relacionado pero las etiquetas pre dentro de las etiquetas de código no se validarán en modo estricto.

Answer 4

Como indica markpasc, un elemento PRE dentro del elemento CODE no está permitido en HTML. La mejor solución es cambiar el código HTML para utilizar < pre> < code> (lo que significa un bloque preformateado que contiene código) directamente en el código HTML de bloques de código.

Answer 5

Se puede 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 cambiar su html. Pero esta solución debería funcionar.