Wie wird das <div> -Tag buchstäblich im <code> / <pre> -Tag angezeigt?

78

Ich verwende ein <code>Tag innerhalb eines <pre>Tags, um Code in meinem Blogger-Blog anzuzeigen. Leider funktioniert es nicht mit HTML-Tags. Gibt es eine Möglichkeit, " <div>" innerhalb <pre>oder eines <code>Tags 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>

Welches funktioniert in Ordnung für alles außer HTML. Irgendeine Idee, wie man das erreicht? Vielen Dank.

html blogger Loolooii
quelle
1
Mögliches Duplikat von Wie man <und> innerhalb von <pre> -Tags entkommt
Jukka K. Korpela
1
Was Sie wirklich wollen, ist ein <![CDATA[]]>Abschnitt; Viel Glück beim Warten darauf, dass die Browser-Autoren 1988 zwischen dem Hinzufügen von Kewl-Fußschützen einholen.
Toby Speight

Antworten:

99

Leider funktioniert es nicht mit HTML-Tags.

<code>bedeutet "Dies ist Code", <pre>bedeutet "Leerzeichen in diesem Markup sind signifikant". Beides bedeutet nicht "Der Inhalt dieses Elements sollte nicht als HTML behandelt werden", daher funktionieren beide einwandfrei, auch wenn sie nicht bedeuten, was sie bedeuten sollen.

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

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

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

QUentin
quelle
7
Vielen Dank. Ich benutze dieses Tool jetzt, um HTML-Zeichen zu entkommen: htmlescape.net/htmlescape_tool.html
Loolooii
2
@XedinUnknown - Und hier heißt es, dass Sie nicht auf dieses Dokument verweisen sollten. Wenn Sie Recht haben, ist nicht jeder Browser auf dem Planeten standardkonform. Du hast nicht recht. Die Spezifikation beschreibt das Inhaltsmodell eines Vorelements und kann Elemente enthalten. Vergleichen Sie mit Textbereichen, die nur Text enthalten können.
Quentin
52

Es scheint, als würde ein schreibgeschützter Textbereich so ziemlich das tun, was Sie wollen.

<textarea readonly> <!-- html code --> </textarea>
Jason Wilkins
quelle
10
Ich möchte eine Klarstellung, warum dies abgelehnt wurde. Das Textarea-Tag ermöglicht wörtlichen HTML-Code. Ich benutze es zufällig, um wörtliches HTML anzuzeigen, als ich auf diese Frage stieß, und die Antworten scheinen ziemlich kompliziert zu sein, verglichen mit der Verwendung eines Textbereichs.
Jason Wilkins
24

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

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

Andernfalls wird "xmp" wie "pre" gerendert.

Roland
quelle
2
Dieses Tag ist veraltet.
Usman Ahmed
@UsmanAhmed Wie auch immer - das xmpwird von netten Sachen wie Einbetten verwendetmarkdown
StephenBoesch
1
xmpMöglicherweise veraltet, aber es ist bis heute eine HTML-Spezifikation, die dies unterstützt (weshalb dies bei allen gängigen Browsern der Fall ist). Ich würde mir vorstellen, dass es niemals vollständig veraltet wird, da es das einzige Etikett seiner Art ist und heute häufiger verwendet wird als damals, als es als veraltet galt.
Nate I
Ich arbeite noch zwei Jahre später in Chrome. Vielen Dank für die Antwort, die mein Problem gelöst hat.
Dave S
16

Versuchen:

<xmp></xmp>

zum Beispiel:

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

Tschüss

Alberto Cerqueira
quelle
Funktioniert gut, aber laut Dokumentation ist es veraltet ... Schade, weil es fantastisch ist :-D
ssougnez
2
Roland gab die gleiche Antwort ein Jahr zuvor und mit mehr Details, so dass dies ein Duplikat ist.
Dave S
7

Entfliehen Sie einfach den HTML-Tags. Zum Beispiel -

Ersetzen Sie < durch&lt;

Ersetzen Sie > durch&gt;

Vollständige Suche hier

Vivek Kalyanarangan
quelle
2

Dies kann leicht mit ein wenig Javascript erreicht werden.

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

Führen Sie das folgende Snippet aus, um es in Aktion zu sehen:

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);
pre {
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.25rem;
}
<pre>
  <code>
   .class {        
     color:red;
   }
   
   // I would like HTML code inside this
   <h1>Hello this is a heading</h1>
  </code>
</pre>
Erweitern Sie das Snippet

Hirok Banik
quelle
0

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

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

Geben Sie hier die Bildbeschreibung ein

Hat bei uns gut funktioniert!

Schlüsselbein
quelle
0

Vielleicht nicht die beste Antwort, aber Sie können so etwas tun:

<p><<input type="hidden">h1<input type="hidden">><input type="hidden">This code is 
displayed!<input type="hidden"><<input type="hidden">/h1<input type="hidden">></p>


<p><<input type="hidden">h1<input type="hidden">><input type="hidden">This code is displayed!<input type="hidden"><<input type="hidden">/h1<input type="hidden">></p>
Erweitern Sie das Snippet

Kwilver Bär
quelle
-3

Benutze das:

<pre>
   <?= htmlentities($script) ?>
</pre>
Lucien Albert
quelle
-4

Ja, mit einer Escape-XML-Funktion. Sie müssen jQuery aktiviert haben, damit es funktioniert.

<pre>
  ${fn:escapeXml('
    <!-- all your code -->
  ')};
</pre>
PanicBus
quelle