HTML-Schnipsel in HTML anzeigen

Wie kann ich zeigen HTML - Schnipsel auf einer Webseite , ohne dass jeder ersetzen <mit <und >mit> ?

Mit anderen Worten, gibt es ein Tag , mit dem HTML erst gerendert werden kann, wenn Sie auf das schließende Tag klicken ?

Nein , das gibt es nicht. Im eigentlichen HTML-Code kann man sich einigen Zeichen nicht entziehen:

• & wie &
• < wie <

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

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

Alle anderen Lösungen, z. B. das Umschließen Ihres Codes in ein <textarea>oder das (veraltete) <xmp>Element, werden nicht mehr funktionieren . ¹

XHTML , die an den Browser als XML deklariert wird (über die HTTP - Content-TypeHeader - nur Einstellung ein! DOCTYPEIst nicht genug ) alternativ einen CDATA - Abschnitt verwenden:

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

Dies funktioniert jedoch nur in XML, nicht in HTML, und selbst dies ist keine narrensichere Lösung, da der Code kein schließendes Trennzeichen enthalten darf ]]>. Selbst in XML ist die einfachste und robusteste Lösung das Escape.

^{1 Beispiel} :

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>

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. Umgeben Sie Ihr HTML-Beispiel optional mit <pre>und / oder <code>Tags.

bester Weg:

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

alte Proben:

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>

Beispiel 3 : (Wenn Sie tatsächlich einen Codeblock "zitieren", wäre das Markup)

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

schönes 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)

verschönern

Syntaxhighlighter

Markieren

JSHighlighter

beste Links für Sie:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-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 kann man Quellcode in HTML hervorheben?

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

<textarea disabled> code </textarea>

Ich hoffe, das hilft jemandem, der nach einer einfachen Möglichkeit sucht, 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 es <xmp>einfach so verwendet: http://jsfiddle.net/barnameha/hF985/1/

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

Hier ist eine andere Idee, ein Hack / Parlour-Trick, mit dem Sie den Code wie folgt in einen Textbereich einfügen können:

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

Das Einfügen von spitzen Klammern und Code wie diesem in einen Textbereich ist ungültiges HTML und führt in verschiedenen Browsern zu undefiniertem Verhalten. 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 einfach mit CSS formatieren. Das einzige Problem wäre, dass Browser diesen kleinen Ziehpunkt in der unteren rechten Ecke hinzufügen, um die Größe des Felds zu ändern. Alternativ können Sie auch ein Eingabe-Tag verwenden.

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

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

Anschließend wird der HTML-Interpreter umgangen und nicht interpretierter Text in allen Browsern konsistent in den Textbereich eingefügt.

Abgesehen davon besteht die einzige Möglichkeit darin, den Code bei statischem HTML-Code selbst zu umgehen oder bei Verwendung einer solchen Technologie serverseitige Methoden wie HtmlEncode () von .NET zu verwenden.

In HTML? Nein.

In XML / XHTML? Sie könnten einen CDATABlock 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 Code-Snippet (fast) wörtlich in den HTML-Code einfügen
  • <sollte vor allem nicht entkommen müssen

Alle Ihre Optionen finden Sie in diesem Baum:

• mit HTML-Syntax
  • Es gibt fünf Arten von Elementen
  • diejenigen, die "normale Elemente" genannt werden (wie <p> )
    • kann kein wörtliches haben <
    • Dies 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 an einen anderen Ort zu verschieben
    • in doppelten Anführungszeichen Attribute, "und &thing;Notwendigkeit zu entkommen: "und &thing;jeweils
  • Rohtextelemente
    • <script>und <style>nur
    • Sie werden niemals sichtbar gemacht
    • Das Einbetten Ihres Textes in Javascript ist jedoch möglich
    • Javascript ermöglicht mehrzeilige Zeichenfolgen mit Backticks
    • es könnte dann dynamisch eingefügt werden
    • Ein Literal </scriptist nirgendwo erlaubt<script>
  • flüchtige Rohtextelemente
    • <textarea>und <title>nur
    • <textarea> ist ein guter Kandidat, um Code einzuschließen
    • es ist völlig legal zu schreiben </html>dort in
    • Nicht legal ist der Teilstring </textarea aus offensichtlichen Gründen
      • entkomme diesem Sonderfall mit </textareaoder ähnlichem
    • &thing; muss entkommen: &thing;
  • Fremdelemente
    • Elemente aus MathML- und SVG-Namespaces
    • Zumindest SVG erlaubt das erneute Einbetten von HTML ...
    • und CDATA ist dort erlaubt, also scheint es Potenzial zu haben
• mit XML-Syntax
  • abgedeckt durch Konrads Antwort

Hinweis: Muss >nie entkommen. Nicht einmal in normalen Elementen.

Wenn Sie einen Teil des Codes anzeigen möchten, den 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;" festlegen. Schreiben Sie die Zeilen einzeln mit "\ r \ n" am Ende.

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

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

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

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

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

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

funktioniert gut für mich ..

"Unter Berücksichtigung des Alexander'sVorschlags denke ich, dass dies ein guter Ansatz ist."

Wenn wir nur versuchen, <textarea>es einfach zu machen, funktioniert es möglicherweise nicht immer, da es möglicherweise schließende textareaTags gibt, die das übergeordnete Tag fälschlicherweise schließen und den Rest der HTML-Quelle im übergeordneten Dokument anzeigen, was unangenehm aussehen würde.

using htmlentitieskonvertiert alle zutreffenden Zeichen, z. B. < >in HTML-Entitäten, wodurch die Möglichkeit von Lecks ausgeschlossen wird.

Es gibt vielleicht Vorteile oder Mängel bei diesem Ansatz oder einen besseren Weg, um die gleichen Ergebnisse zu erzielen. Wenn ja, kommentieren Sie dies bitte, da ich gerne von ihnen lernen würde :)

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;
?>

$strGeben Sie dann den Wert von htmlencoded aus:

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

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

<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 aussehen:

Sie können es sehen , leben hier

Eigentlich gibt es einen Weg, dies zu tun. Es hat eine Einschränkung (eins), ist aber 100% Standard, nicht veraltet (wie xmp) und funktioniert.

Und es ist trivial. Hier ist es:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

Bitte lassen Sie mich erklären. Zuallererst erledigt ein gewöhnlicher HTML-Kommentar die Aufgabe, um zu verhindern, dass der gesamte Block interpretiert wird. Sie können problemlos beliebige Tags hinzufügen, die alle ignoriert werden. Von der Interpretation ignoriert, aber immer noch über verfügbarinnerHTML ! Was also übrig bleibt, ist, den Inhalt abzurufen und die vorhergehenden und nachfolgenden Kommentartoken zu filtern.

Außer (denken Sie daran - die Einschränkung) können Sie dort keine HTML-Kommentare einfügen, da (zumindest in meinem Chrome) das Verschachteln von HTML-Kommentaren nicht unterstützt wird und das erste '->' die Show beendet.

Nun, es ist eine böse kleine Einschränkung, aber in bestimmten Fällen ist es überhaupt kein Problem, wenn Ihr Text frei von HTML-Kommentaren ist. Und es ist einfacher, einem Konstrukt zu entkommen, als einer ganzen Reihe von Konstrukten.

Was ist das für eine seltsame LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJoSaite? Es ist eine zufällige Zeichenfolge, wie ein Hash, die wahrscheinlich nicht im Block verwendet wird und für die? Hier ist der Kontext, warum ich es benutzt habe. In meinem Fall habe ich den Inhalt eines DIV genommen, ihn dann mit Showdown-Markdown verarbeitet und dann die Ausgabe einem anderen Div zugewiesen. Die Idee war, Markdown inline in die HTML-Datei zu schreiben und einfach in einem Browser zu öffnen, und es würde sich beim Laden im laufenden Betrieb verwandeln. Also, in meinem Fall <!--wurde verwandelt <p><!--</p>, der Kommentar entkam richtig. Es hat funktioniert, aber den Bildschirm verschmutzt. Um es einfach mit Regex zu entfernen, wurde die zufällige Zeichenfolge verwendet. Hier ist der Code:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

Und es funktioniert.

Wenn jemand interessiert ist, wird dieser Artikel mit dieser Technik geschrieben. Fühlen Sie sich frei herunterzuladen und schauen Sie in die HTML-Datei.

Es hängt davon ab, wofür Sie es verwenden. Ist es Benutzereingabe? Dann benutze <textarea>und entkomme alles. In meinem Fall, und wahrscheinlich auch in Ihrem Fall, habe ich einfach Kommentare verwendet, und es macht den Job.

Wenn Sie Markdown nicht verwenden und es nur so erhalten möchten, wie es von einem Tag stammt, ist es noch einfacher:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

und JavaScript-Code, um es zu bekommen:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

Es gibt einige Möglichkeiten, um alles in HTML zu umgehen, keine davon ist nett.

Oder Sie könnten eine iframeeinfügen, die eine einfache alte Textdatei lädt.

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 Ruf. Ich fühlte mich jedoch gezwungen, etwas zu sagen, um Menschen zu helfen, die im Internet nach Antworten suchen.

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>";

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

es wird das maskierte HTML zurückgeben

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 Codefragmente in a platzieren, textareawerden sie als Code angezeigt.

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

Dies ist ein bisschen wie ein Hack, aber wir können so etwas verwenden wie:

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}

<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

Mit diesem CSS zeigt der Browser Skripte im Hauptteil an. Es wird nicht versucht, dieses Skript auszuführen, da es einen unbekannten Typ hat text/html. Es ist nicht erforderlich, Sonderzeichen in a zu <script>maskieren, es sei denn, Sie möchten einen Abschluss einfügen</script> Tag einfügen.

Ich verwende so etwas, um ausführbares JavaScript im Hauptteil der Seite anzuzeigen, für eine Art "Lese- und Schreibprogramm".

Diese Frage enthält weitere Informationen. Wann sollten Tags sichtbar sein und warum können sie angezeigt werden? .

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)

Eine Kombination aus ein paar Antworten, die hier zusammenarbeiten:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)

<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>