Quellcode sichtbar machen

Warum Code Escapen?

Dieser Punkt war für mich besonders wichtig bei der Entwicklung dieser Seite - und auch besonders verwirrend xD Escapen? Doppelt escapen? Neben & und ; tauchten viele ? auf. Auch wenn es vielleicht nicht zwingend zu den ersten Schritten im HTML zählt, ist es nicht ganz unwichtig, da auch andere Zeichen wie z. B. ein mehrfaches Leerzeichen vom Browser verschluckt werden. Ich versuche es so einfach wie möglich zu notieren und es gibt eine übersichtliche Tabelle.

Wenn du HTML-, CSS- oder JavaScript-Code direkt in ein Dokument schreibst, interpretiert der Browser diesen Code sofort. Das bedeutet: Er führt ihn aus oder stellt ihn dar – statt ihn als reinen Text zu zeigen.

Code im Text anzeigen

Ein Beispiel: <p>"Hello World!"</p> würde im Browser einfach als „Hello World!“ erscheinen – die Tags <p> und </p> verschwinden, weil der Browser sie als Anweisung versteht und nicht als Textinhalt.

Das Snippet <p>"Hello World!"</p> schreibst du also so:

HTML Kopieren

<p>"Hello World!"</p>

Doppelte Kodierung - wenn Entities selbst sichtbar sein sollen

Manchmal willst du sogar die HTML-Entities selbst als Text anzeigen – also nicht < , sondern < . Dafür musst du sie doppelt kodieren : Du fügst ein amp; zwischen & und ; ein.

Längere Codeblöcke anzeigen

Wenn du mehrere Zeilen Code darstellen möchtest, verwendest du die Kombination aus <pre> und <code> . Das <pre> -Element bewahrt Zeilenumbrüche und Einrückungen, während <code> den Inhalt als Quelltext markiert.

Beispiel (sichtbare Version)

So sieht dein Code im Browser aus:

HTML Kopieren

<pre>
    <code>
    hier kannst du deinen
    mehrzeiligen Code einfügen
    </code>
</pre>

Doppelt kodierte Schreibweise

Damit das Snippet selbst sichtbar bleibt, schreibst du:

HTML Kopieren

<pre>
    <code>
    hier kannst du deinen
    mehrzeiligen Code einfügen
    </code>
</pre>

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.