it-swarm.com.de

Wie kann man das <div> -Tag wörtlich im <code>/<pre> -Tag anzeigen lassen?

Ich verwende <code>-Tag in einem <pre>-Tag, um Code in meinem Blogger-Blog anzuzeigen. Leider funktioniert es nicht mit HTML-Tags. Gibt es eine Möglichkeit, "<div>" im <pre>- oder <code>-Tag anzuzeigen, ohne es tatsächlich als HTML zu interpretieren? Das mache ich gerade:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Was funktioniert für alles außer HTML. Hast du eine Idee, wie du das erreichen kannst? Vielen Dank.

58
Loolooii

Leider funktioniert es nicht mit HTML-Tags.

<code> bedeutet "Dies ist Code", <pre> bedeutet "Leerzeichen in dieser Markierung sind von Bedeutung". Weder bedeutet "Der Inhalt dieses Elements sollte nicht als HTML behandelt werden", daher funktionieren beide perfekt, auch wenn sie nicht bedeuten, was Sie wollen.

Gibt es eine Möglichkeit, "<div>" im <pre>- oder <code>-Tag anzuzeigen, ohne es tatsächlich als HTML zu interpretieren? 

Wenn Sie ein <-Zeichen wiedergeben möchten, verwenden Sie &lt; und &gt; für > und &amp; für &.

Sie können Markup nicht (in modernem HTML) schreiben und als Text interpretieren lassen.

71
Quentin

Es scheint, als ob ein Textfeld "Readonly" so ziemlich das macht, was Sie wollen.

<textarea readonly> <!-- html code --> </textarea>
39
Jason Wilkins

Sie können das "xmp" -Element verwenden. Der <xmp></xmp> war von Anfang an in HTML und wird von allen Browsern unterstützt. Auch wenn es nicht verwendet werden sollte, wird es allgemein unterstützt.

Alles, was sich in <xmp></xmp> befindet, wird so wie es ist (es werden dort keine Markup-Tags oder Zeichenverweise erkannt), außer aus offensichtlichen Gründen das End-Tag des Elements selbst.

Ansonsten wird "xmp" wie "pre" gerendert.

19
Roland

Versuchen:

<xmp></xmp>

zum Beispiel:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

tschüss

10

Entkommen Sie einfach den HTML-Tags. Zum Beispiel - 

Ersetzen Sie < durch &lt;

Ersetzen Sie > durch &gt;

Komplette Suche hier

3

Testen Sie CodeMirror ( https://codemirror.net/ ).

Es ist eine einfache Bibliothek, die den Code in HTML formatiert. Hier ist ein Screenshot von dem, worauf ich mich beziehe:

enter image description here

Hat gut für uns gearbeitet!

0
Collarbone

Benutze das:

<pre>
   <?= htmlentities($script) ?>
</pre>
0
Lucien Albert