Comment ajouter une balise pre dans une balise de code avec jQuery ?

Question

j'essaie d'utiliser jQuery pour formater des blocs de code, notamment pour ajouter un <pre> étiquette à l'intérieur du <code> étiqueter:

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

Firefox applique correctement le formatage, mais IE place l'intégralité du bloc de code sur une seule ligne.Si j'ajoute une alerte

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

Je vois qu'IE a inséré du texte supplémentaire dans la balise pre :

<PRE jQuery1218834632572="null">

Si je recharge la page, le numéro suivant jQuery change.

Si j'utilise wrap() au lieu de wrapInner(), pour envelopper le <pre> en dehors de <code> balise, IE et Firefox le gèrent correctement.Mais je ne devrais pas <pre> travail à l'intérieur <code> aussi?

je préférerais utiliser wrapInner() car je peux alors ajouter une classe CSS au <pre> balise pour gérer tout le formatage, mais si j'utilise wrap(), je dois mettre le CSS de formatage de page dans le <pre> balise et formatage du texte/police dans le <code> tag, ou Firefox et IE s'étouffent tous les deux.Ce n’est pas très grave, mais j’aimerais que cela reste aussi simple que possible.

Quelqu'un d'autre a-t-il rencontré cela ?Est-ce que j'ai raté quelque chose ?

Answer 1

C'est la différence entre bloquer et en ligne éléments. pre est un élément de niveau bloc.Ce n'est pas légal de le mettre dans un code étiquette, qui ne peut contenir que du contenu en ligne.

Parce que les navigateurs doivent prendre en charge toutes les horribles soupes de balises qu'ils peuvent trouver sur le Web réel, Firefox essaie de faire ce que vous voulez dire.IE le gère différemment, ce qui est correct selon les spécifications ;le comportement dans ce cas n’est pas spécifié, car cela ne devrait jamais se produire.

• Pourriez-vous à la place remplacer le code élément avec le pre?(En raison du problème de bloc/inline, techniquement, cela ne devrait fonctionner que si les éléments sont à l'intérieur un élément avec un contenu "flow", mais les navigateurs peuvent quand même faire ce que vous voulez.)
• Pourquoi est-ce un code élément en premier lieu, si vous voulez prele comportement de ?
• Vous pourriez également donner le code élément preLe pouvoir de préservation des espaces avec le CSS white-space: pre, Mais apparemment IE 6 ne respecte cela qu'en mode strict.

Answer 2

Au fait, je ne sais pas si c'est lié mais les balises pre à l'intérieur des balises de code ne seront pas validées en mode strict.

Answer 3

Utilisez-vous la dernière version de jQuery ?Et si tu essayais

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

Est-ce que c'est mieux ou est-ce que tu obtiens le même résultat ?

Answer 4

Comme l'a indiqué markpasc, un élément PRE à l'intérieur de l'élément CODE n'est pas autorisé en HTML.La meilleure solution consiste à modifier votre code HTML pour utiliser <pre><code> (ce qui signifie un bloc préformaté contenant du code) directement dans votre code HTML pour les blocs de code.

Answer 5

Vous pouvez utiliser html() pour l'envelopper :

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

Comme mentionné ci-dessus, vous feriez mieux de changer votre code HTML.Mais cette solution devrait fonctionner.