Wie füge ich mit jQuery ein Pre-Tag innerhalb eines Code-Tags hinzu?

Question

Ich versuche es zu verwenden jQuery um Codeblöcke zu formatieren, insbesondere um a hinzuzufügen <pre> Tag innerhalb der <code> Etikett:

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

Firefox wendet die Formatierung korrekt an, aber IE fügt den gesamten Codeblock in eine Zeile ein.Wenn ich eine Warnung hinzufüge

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

Ich sehe, dass IE zusätzlichen Text in das Pre-Tag eingefügt hat:

<PRE jQuery1218834632572="null">

Wenn ich die Seite neu lade, ändert sich die Nummer nach jQuery.

Wenn ich es verwende wrap() anstatt wrapInner(), um das einzuwickeln <pre> außerhalb von <code> Tag verwenden, verarbeiten sowohl IE als auch Firefox es korrekt.Sollte aber nicht <pre> arbeiten innen <code> sowie?

Ich würde es lieber verwenden wrapInner() weil ich dann eine CSS-Klasse hinzufügen kann <pre> Tag, um alle Formatierungen zu verarbeiten, aber wenn ich verwende wrap(), ich muss Seitenformatierungs-CSS in das einfügen <pre> Tag und Text-/Schriftartformatierung im <code> Tag, oder Firefox und IE ersticken beide.Keine große Sache, aber ich möchte es so einfach wie möglich halten.

Ist das noch jemandem begegnet?Vermisse ich etwas?

Answer 1

Das ist der Unterschied zwischen Block und Inline Elemente. pre ist ein Element auf Blockebene.Es ist nicht legal, es in eine zu stecken code Tag, der kann nur Inline-Inhalte enthalten.

Da Browser jede schreckliche Tag-Suppe unterstützen müssen, die sie im echten Web finden, versucht Firefox, das zu tun, was Sie meinen.Der IE geht anders damit um, was laut Spezifikation in Ordnung ist.Das Verhalten in diesem Fall ist nicht spezifiziert, da es niemals passieren sollte.

• Könnten Sie stattdessen? ersetzen Die code Element mit dem pre?(Aufgrund des Block-/Inline-Problems sollte das technisch gesehen nur funktionieren, wenn sich die Elemente darin befinden ein Element mit „Flow“-Inhalt, aber die Browser könnten trotzdem tun, was Sie wollen.)
• Warum ist es ein code Element an erster Stelle, wenn Sie möchten preVerhalten?
• Du könntest auch das geben code Element preDie Leerraumerhaltungsleistung von CSS mit CSS white-space: pre, aber anscheinend IE 6 berücksichtigt dies nur im strengen Modus.

Answer 2

Übrigens weiß ich nicht, ob es damit zusammenhängt, aber Pre-Tags innerhalb von Code-Tags werden im strikten Modus nicht validiert.

Answer 3

Verwenden Sie die neueste jQuery?Was ist, wenn Sie es versuchen?

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

Ist es besser oder erhalten Sie das gleiche Ergebnis?

Answer 4

Wie markpasc feststellte, ist ein PRE-Element innerhalb eines CODE-Elements in HTML nicht zulässig.Die beste Lösung besteht darin, Ihren HTML-Code so zu ändern, dass er <pre><code> (was einen vorformatierten Block bedeutet, der Code enthält) direkt in Ihrem HTML für Codeblöcke verwendet.

Answer 5

Sie könnten html() verwenden, um es zu verpacken:

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

Wie oben erwähnt, ist es besser, den HTML-Code zu ändern.Aber diese Lösung sollte funktionieren.