Frage von MarcShmallow, 46

Wie erstellt man eine HTML Codebox für HTML-Code?

Hallo Leute,wir brauchen für die Schule eine HTML Seite und ich will ein HTML-Befehlsverzeichnis machen.Dazu brauche ich eine Codebox. Ich habe zwar schon eine aber wenn ich einen HTML-Tag dort einfügen will , buggt sie! Ich will aber nicht die Dreieckigen klammern entfernen! Kann mir jemand helfen?

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von medmonk, 22

Wenn du einzelne Elemente korrekt auszeichnen würdest, gäbe es auch keine Bugs. Daher validiere bitte deine Markup und behebe die Fehler. Ebenso sämtliche Formatierungen in einem externen Stylesheet (CSS) notieren. 

<code>
Hier der gewünschte Code
</code>

In CSS das Code Element selektieren und beinah beliebig formatieren. Alternativ dem Code-Element eine Klasse zuweisen und diese in deinem CSS ansprechen. Um jetzt bei deinem Beispiel zu bleiben. Du musst lediglich innerhalb des Code-Elements das Größer und Kleiner-als Zeichen als Entities setzen. 

&lt; a &gt; = <a> <!-- Leerzeichen weglassen -->

Siehe Screenshot! 

https://developer.mozilla.org/de/docs/Web/HTML/Element/code

LG medmonk 

Antwort
von mastema666, 29

Du könntest das in eine Textarea packen, z.B. so:

<textarea><b>Test</b></textarea>

Dann werden innerhalb die spitzen Klammern mit angezeigt bwz nicht "geparsed".

Alternativ kannst du aber auch die Klammern einfach als HTML Codes schreiben, also &gt; für > bzw &lt; für < (Codes für viele weitere solcher Sonderzeichen: http://www.ascii.cl/htmlcodes.htm).

Kommentar von medmonk ,

Das Textarea-Element ist nicht zum Auszeichnung von Code-Fragmenten da! Dafür gibt es unter anderem das Code-Element. 

Kommentar von mastema666 ,

Jo, dafür gedacht sind Textareas natürlich nicht, ist halt eine "Quick & Dirty" Lösung wenn man zu faul ist die HTML-Entities zu benutzen ;)

Schöner ists natürlich mit code oder ggf pre zu formatieren (und bei größeren Codeblöcken u.U. noch mit sowas wie highlight.js oder ähnlichem).

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten