Come faccio ad aggiungere un pre tag all'interno di un codice di tag con jQuery?

Question

Sto cercando di utilizzare jQuery per il formato di blocchi di codice, in particolare per aggiungere un <pre> tag all'interno del <code> tag:

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

Firefox si applica la formattazione corretta, ma IE mette l'intero blocco di codice su una riga.Se posso aggiungere un avviso

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

Vedo che IE ha inserito qualche ulteriore testo nel pre tag:

<PRE jQuery1218834632572="null">

Se mi ricarica la pagina, il numero che segue jQuery modifiche.

Se io uso wrap() invece di wrapInner(), per avvolgere il <pre> al di fuori del <code> tag, IE e Firefox di gestirlo correttamente.Ma non dovrebbe <pre> lavoro all'interno <code> come bene?

Io preferisco usare wrapInner() perché poi posso aggiungere una classe CSS per la <pre> tag per gestire tutte le operazioni di formattazione, ma se io uso wrap(), Devo mettere la formattazione della pagina CSS <pre> tag e testo/font formattazione del <code> tag, o Firefox e IE sia soffocare.Non è un affare enorme, ma vorrei tenerlo il più semplice possibile.

Qualcun altro ha riscontrato questo?Mi manca qualcosa?

Answer 1

Che differenza c'è tra block e inline elementi. pre è un elemento di livello.Non è legale per metterlo all'interno di una code tag, che può contenere solo contenuto in linea.

Poiché i browser supportano qualsiasi godawful tag soup si potrebbe trovare sul web, Firefox cerca di fare ciò che vuoi dire.IE accade per gestire in modo diverso, il che è un bene per la spec;il comportamento in questo caso non è specificato, perché non dovrebbe mai accadere.

• Potrebbe invece sostituire il code elemento con il pre?(A causa del blocco/inline problema, tecnicamente che dovrebbe funzionare solo se gli elementi sono all'interno un elemento con il "flusso" dei contenuti, ma il browser potrebbe fare quello che vuoi in ogni caso.)
• Perché è un code elemento in primo luogo, se si desidera pre's comportamento?
• Si potrebbe anche dare il code elemento pre's spazio potere di conservazione con il CSS white-space: pre, ma a quanto pare IE 6 solo onori che in Modalità Rigorosa.

Answer 2

Btw non so se è collegato ma pre all'interno del tag tag di codice non convalidare in modalità rigorosa.

Answer 3

Stai usando l'ultima jQuery ?Che cosa succede se si tenta

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

È meglio o non si ottiene lo stesso risultato ?

Answer 4

Come markpasc dichiarato, un PRE elemento all'interno del CODICE elemento non è consentito in HTML.La soluzione migliore è quella di modificare il codice HTML da usare <pre><code> (il che significa un preformattato blocco che contiene il codice) direttamente in HTML per i blocchi di codice.

Answer 5

Si potrebbe usare l'html() per avvolgere:

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

Come detto sopra, sarebbe meglio cambiare il vostro html.Ma questa soluzione dovrebbe funzionare.