Come faccio ad aggiungere un pre tag all'interno di un codice di tag con jQuery?
-
08-06-2019 - |
Domanda
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?
Soluzione
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 ilpre
?(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 desiderapre
's comportamento? - Si potrebbe anche dare il
code
elementopre
's spazio potere di conservazione con il CSSwhite-space: pre
, ma a quanto pare IE 6 solo onori che in Modalità Rigorosa.
Altri suggerimenti
Btw non so se è collegato ma pre all'interno del tag tag di codice non convalidare in modalità rigorosa.
Stai usando l'ultima jQuery ?Che cosa succede se si tenta
$("code").wrapInner(document.createElement("pre"));
È meglio o non si ottiene lo stesso risultato ?
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.
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.