Como adiciono uma tag pré dentro de uma tag de código com jQuery?

Question

estou tentando usar jQuery para formatar blocos de código, especificamente para adicionar um <pre> etiqueta dentro do <code> marcação:

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

O Firefox aplica a formatação corretamente, mas o IE coloca todo o bloco de código em uma linha.Se eu adicionar um alerta

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

Vejo que o IE inseriu algum texto adicional na tag pré:

<PRE jQuery1218834632572="null">

Se eu recarregar a página, o número após o jQuery muda.

Se eu usar wrap() em vez de wrapInner(), para embrulhar o <pre> fora da <code> tag, tanto o IE quanto o Firefox lidam com isso corretamente.Mas não deveria <pre> trabalhar dentro <code> também?

eu prefiro usar wrapInner() porque posso então adicionar uma classe CSS ao <pre> tag para lidar com toda a formatação, mas se eu usar wrap(), tenho que colocar CSS de formatação de página no <pre> tag e formatação de texto/fonte no <code> tag, ou Firefox e IE engasgam.Não é grande coisa, mas gostaria de mantê-lo o mais simples possível.

Mais alguém encontrou isso?Estou esquecendo de algo?

Answer 1

Essa é a diferença entre bloquear e incorporar elementos. pre é um elemento de nível de bloco.Não é legal colocá-lo dentro de um code etiqueta, que só pode conter conteúdo in-line.

Como os navegadores precisam suportar qualquer sopa de tags horrível que possam encontrar na web real, o Firefox tenta fazer o que você quer dizer.Acontece que o IE lida com isso de maneira diferente, o que é bom para as especificações;o comportamento nesse caso não é especificado, porque nunca deveria acontecer.

• Você poderia em vez disso substituir o code elemento com o pre?(Por causa do problema de bloco/inline, tecnicamente isso só deve funcionar se os elementos estiverem dentro um elemento com conteúdo de "fluxo", mas os navegadores podem fazer o que você quiser de qualquer maneira.)
• Por que é um code elemento em primeiro lugar, se você quiser precomportamento?
• Você também poderia dar o code elemento preo espaço em branco preservando o poder com o CSS white-space: pre, mas aparentemente O IE 6 apenas honra isso no modo estrito.

Answer 2

A propósito, não sei se está relacionado, mas as pré-tags dentro das tags de código não serão validadas no modo estrito.

Answer 3

Você está usando o jQuery mais recente?E se você tentar

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

É melhor ou você obtém o mesmo resultado?

Answer 4

Como afirmou markpasc, um elemento PRE dentro do elemento CODE não é permitido em HTML.A melhor solução é alterar seu código HTML para usar <pre><code> (que significa um bloco pré-formatado que contém código) diretamente em seu HTML para blocos de código.

Answer 5

Você poderia usar html() para envolvê-lo:

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

Como mencionado acima, seria melhor alterar seu html.Mas esta solução deve funcionar.