HTML-Code in HTML anzeigen

Die bewährte Methode für HTML:

1. Ersetzen Sie das &-Zeichen durch &
2. Ersetzen Sie das <-Zeichen durch <
3. Ersetzen Sie das >-Zeichen durch >
4. Umschließen Sie Ihr HTML-Beispiel optional mit <pre> und/oder <code> tags.

bester Weg:

<xmp>
// your codes ..
</xmp>

alte Proben:

sample 1:

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

sample 2:

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

sample 3: (Wenn Sie tatsächlich einen Codeblock "zitieren", würde das Markup lauten)

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

Nice CSS-Beispiel:

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

Syntax-Hervorhebungscode (für professionelle Arbeit):

Regenbogen(sehr perfekt) 

verherrlichen

SyntaxHighlighter

Markieren

JSHighlighter

beste Links für Sie:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-zu-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

Wie hebe ich Quellcode in HTML hervor?

Eine Art naiver Methode zum Anzeigen von Code wird es in einem Textbereich enthalten und das deaktivierte Attribut hinzufügen, damit es nicht bearbeitet werden kann.

<textarea disabled> code </textarea>

Hoffe, dass jemandem auf der Suche nach einem einfachen Weg geholfen wird, Dinge zu erledigen.

Veraltet , funktioniert 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 habe <xmp> einfach so benutzt: http://jsfiddle.net/barnameha/hF985/1/

In HTML? Nein.

In XML/XHTML? Sie können einen CDATA-Block verwenden.

Es ist sehr einfach ..... _. Verwenden Sie diesen XMP-Code

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Ich nehme an: 

• sie möchten 100% gültiges HTML5 schreiben
• sie möchten das (fast) wörtliche Code-Snippet im HTML-Code platzieren
  • vor allem < sollte nicht fluchtfähig sein

Alle Ihre Optionen befinden sich in diesem Baum:

• mit HTML-Syntax
  • es gibt fünf Arten von Elementen
  • diejenigen, die als "normale Elemente" bezeichnet werden (wie <p>)
    • kann kein Literal haben <
    • es wird als Beginn des nächsten Tags oder Kommentars betrachtet
  • leere Elemente
    • sie haben keinen Inhalt
    • sie könnten Ihren HTML-Code in ein Datenattribut einfügen (dies gilt jedoch für alle Elemente).
    • das würde JavaScript benötigen, um die Daten woanders hin zu verschieben
    • in doppelten Anführungszeichen müssen " und &thing; escapinging werden: " und &thing;
  • rohe Textelemente
    • Nur <script> und <style>
    • sie werden niemals sichtbar gemacht
    • das Einbetten Ihres Textes in Javascript ist jedoch möglicherweise machbar
    • Javascript erlaubt mehrzeilige Zeichenketten mit Backticks
    • es könnte dann dynamisch eingefügt werden
    • ein Literal </script ist nirgendwo in <script> zulässig.
  • escape-Rohtextelemente
    • Nur <textarea> und <title>
    • <textarea> ist ein guter Kandidat, um Code einzubinden
    • es ist absolut legal, dort </html> zu schreiben
    • nicht zulässig ist der Teilstring </textarea aus naheliegenden Gründen
      • diesen Sonderfall mit </textarea oder ähnlichem umgehen
    • &thing; muss maskiert werden: &thing;
  • fremde Elemente
    • elemente aus MathML- und SVG-Namespaces
    • zumindest SVG erlaubt erneut das Einbetten von HTML ...
    • und CDATA ist dort erlaubt, scheint also Potenzial zu haben
• mit XML-Syntax
  • abgedeckt durch Konrads Antwort

Hinweis: > muss niemals umgangen werden. Nicht einmal bei normalen Elementen.

Das veraltete <xmp>-Tag tut dies im Wesentlichen, ist jedoch nicht mehr Teil der XHTML-Spezifikation. Es sollte trotzdem in allen aktuellen Browsern funktionieren.

Hier ist eine weitere Idee, ein Hack/Salon-Trick. Sie könnten den Code in einen Textbereich wie folgt einfügen:

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

Das Einfügen von spitzen Klammern und Code wie dieser in einen Textbereich ist ungültiges HTML und führt zu undefiniertem Verhalten in verschiedenen Browsern. In Internet Explorer wird der HTML-Code interpretiert, während Mozilla, Chrome und Safari ihn nicht interpretieren.

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

Der richtige Weg, um Code in Ihren Textbereich einzufügen, ist die serverseitige Sprache wie PHP, zum Beispiel:

<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 in allen Browsern ein.

Ansonsten besteht die einzige Möglichkeit darin, den Code selbst zu entziehen, wenn statisches HTML verwendet wird, oder serverseitige Methoden wie HtmlEncode () von .NET, wenn diese Technologie verwendet wird.

Letztendlich ist die beste (wenn auch nervige) Antwort "Flucht aus dem Text".

Es gibt jedoch viele Texteditoren - oder sogar eigenständige Mini-Dienstprogramme -, die dies automatisch tun können. Sie sollten also niemals manuell entkommen müssen, wenn Sie nicht möchten (es sei denn, es handelt sich um eine Mischung aus Escape-Code und nicht-Escape-Code ...)

Eine schnelle Google-Suche zeigt mir dieses Beispiel: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

Dies ist ein einfacher Trick, den ich in Safari und Firefox ausprobiert habe

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Es wird so zeigen:

Sie können es live sehen hier

<textarea ><?php echo htmlentities($page_html); ?></textarea>

funktioniert gut für mich ..

"Denken Sie an Alexander's-Vorschlag. Ich denke, das ist ein guter Ansatz."

wenn Sie einfach nur <textarea> versuchen, funktioniert es möglicherweise nicht immer, da möglicherweise textarea-Tags geschlossen werden, die das übergeordnete Tag falsch schließen und den Rest der HTML-Quelle im übergeordneten Dokument anzeigen, was unangenehm aussehen würde.

durch die Verwendung von htmlentities werden alle anwendbaren Zeichen, z. B. < >, in HTML-Entitäten konvertiert. Dadurch werden mögliche Lecks ausgeschlossen.

Es gibt möglicherweise Vorteile oder Mängel dieses Ansatzes oder eine bessere Möglichkeit, dieselben Ergebnisse zu erzielen. Wenn ja, bitte kommentieren, da ich gerne von ihnen lernen würde :)

Wenn Sie ein Stück Code anzeigen möchten, das Sie an anderer Stelle auf derselben Seite ausführen, können Sie textContent verwenden (es ist pure-js und wird gut unterstützt: http://caniuse.com/#feat=textcontent )

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

Um eine mehrzeilige Formatierung im Ergebnis zu erhalten, müssen Sie den CSS-Stil "white-space: pre;" auf das Ziel div, und schreiben Sie die Zeilen einzeln mit "\ r\n" am Ende von jedem. 

Hier ist eine Demo: https://jsfiddle.net/wphps3od/

Diese Methode hat gegenüber der Verwendung von Textfeldern einen Vorteil: Code wird nicht wie in einem Textfeld neu formatiert. (Dinge wie   werden vollständig in einem Textbereich entfernt.)

Sie können eine serverseitige Sprache wie PHP verwenden, um Rohtext einzufügen:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

dann den Wert von $str htmlencoded ausgeben:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

Dies ist bei weitem die beste Methode für die meisten Situationen:

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

Ich hätte die erste Person gewählt, die es vorgeschlagen hat, aber ich habe keinen guten Ruf. Ich fühlte mich dazu gezwungen, etwas zu sagen, weil die Leute im Internet nach Antworten suchten.

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

es wird das entschlüsselte HTML zurückgegeben

Es gibt verschiedene Möglichkeiten, alles zu entgehen in HTML, keine davon nett.

Oder Sie könnten eine iframe eingeben, die eine einfache alte Textdatei lädt.

So habe ich es gemacht:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

<textarea readonly> code </textarea>

OR

<textarea disabled> code </textarea>

Verwenden Sie das erste mit dem Attribut 'readonly', wenn Sie die Zeichenfolge im Textbereich auswählen und kopieren möchten

Verwenden Sie die zweite Option, wenn Sie die Daten nicht auswählen oder kopieren möchten. wenn Sie sich nur für die Anzeige von Informationen interessieren.

Du könntest es versuchen:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Es funktioniert möglicherweise nicht in jeder Situation, aber wenn Sie Code-Snippets in ein textarea einfügen, werden diese als Code angezeigt.

Sie können den Textbereich mit CSS gestalten, wenn Sie nicht möchten, dass er wie ein tatsächlicher Textbereich aussieht.