So zeigen Sie rohen HTML-Code auf einer HTML-Seite an

Wie kann ich HTML-Snippets auf einer Webseite anzeigen, ohne sie ersetzen zu müssen? < mit < und > mit >?

Mit anderen Worten, gibt es ein Tag für Rendern Sie kein HTML, bis Sie auf das schließende Tag treffen?

Die altbewährte Methode für HTML:

1. Ersetze das & Charakter mit &
2. Ersetze das < Charakter mit <
3. Ersetze das > Charakter mit >
4. Umgeben Sie optional Ihr HTML-Beispiel mit <pre> und/oder <code> Stichworte.

Probe 1:

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

Probe 2:

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

Probe 3: (Wenn Sie tatsächlich einen Codeblock “zitieren”, wäre das Markup)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

gibt es ein tag für HTML erst rendern, wenn Sie auf das schließende Tag klicken?

Nein, da ist nicht. In HTML selbst gibt es keine Möglichkeit, einige Zeichen zu maskieren:

• & als &
• < als <

(Es besteht übrigens keine Notwendigkeit zu entkommen > aber die Leute tun es oft aus Gründen der Symmetrie.)

Und natürlich sollten Sie den resultierenden, maskierten HTML-Code darin einschließen <pre><code>…</code></pre> um (a) Leerzeichen und Zeilenumbrüche beizubehalten und (b) es als Codeelement zu markieren.

Alle anderen Lösungen, wie das Umhüllen Ihres Codes in eine <textarea> oder die (veraltet) <xmp> Element, wird brechen.¹

XHTML, das dem Browser als XML deklariert wird (über die HTTP Content-Type Header! — bloßes Setzen von a DOCTYPE ist nicht genug) könnte alternativ einen CDATA-Abschnitt verwenden:

<![CDATA[Your <code> here]]>

Aber das funktioniert nur in XML, nicht in HTML, und selbst das ist keine narrensichere Lösung, da der Code das schließende Trennzeichen nicht enthalten darf ]]>. Also ist selbst in XML die einfachste und robusteste Lösung das Maskieren.

¹ Fallbeispiel:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

Eine Art naive Methode zum Anzeigen von Code besteht darin, ihn in einen Textbereich aufzunehmen und ein deaktiviertes Attribut hinzuzufügen, sodass er nicht bearbeitet werden kann.

<textarea disabled> code </textarea>

Ich hoffe, das hilft jemandem, der nach einer einfachen Möglichkeit sucht, Dinge zu erledigen.

Veraltetfunktioniert aber in FF3 und IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Empfohlen:

<pre><code>
    code here, escape it yourself.
</code></pre>

ich benutzte <xmp> genau wie dieser :
http://jsfiddle.net/barnameha/hF985/1/

Das Abgelehnte <xmp> tag macht das im Wesentlichen, ist aber nicht mehr Teil der XHTML-Spezifikation. Es sollte aber trotzdem in allen aktuellen Browsern funktionieren.

Hier ist eine andere Idee, ein Hack/Salontrick, Sie könnten den Code so in ein Textfeld einfügen:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Das Einfügen von spitzen Klammern und solchem ​​Code in einen Textbereich ist ungültiges HTML und führt zu undefiniertem Verhalten in verschiedenen Browsern. Im Internet Explorer wird das HTML interpretiert, während Mozilla, Chrome und Safari es uninterpretiert lassen.

Wenn Sie möchten, dass es nicht bearbeitbar ist und anders aussieht, können Sie es einfach mit CSS gestalten. Das einzige Problem wäre, dass Browser diesen kleinen Ziehgriff in der unteren rechten Ecke hinzufügen, um die Größe des Felds zu ändern. Oder versuchen Sie stattdessen, stattdessen ein Eingabe-Tag zu verwenden.

Der richtige Weg, Code in Ihr Textfeld einzufügen, ist die Verwendung einer serverseitigen Sprache wie beispielsweise dieses PHP:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

Dann umgeht es den HTML-Interpreter und fügt uninterpretierten Text konsistent über alle Browser in den Textbereich ein.

Abgesehen davon besteht die einzige Möglichkeit darin, den Code selbst zu maskieren, wenn statisches HTML verwendet wird, oder serverseitige Methoden wie HtmlEncode () von .NET zu verwenden, wenn eine solche Technologie verwendet wird.