HTML/Tutorials/HTML-Code in HTML darstellen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

HTML wird häufig auch für Sprachdokumentationen verwendet, auch und gerade für Internet-Technologien, die selber wiederum HTML oder XML-basierte Sprachen beschreiben. Dabei tritt das Problem auf, dass für zusammenhängende Beispiele oftmals massenweise HTML-Code oder XML-Code dargestellt werden soll.

HTML-Code innerhalb eines HTML-Dokuments wird aber immer vom Browser geparst, auch wenn er innerhalb von code und pre-Elementen notiert wird. Unter den 18 Ur-Elementen befand sich schon ein listing-Element. Genau wie beim ebenfalls obsoleten xmp-Element wird darin enthaltener HTML-Code nicht gerendert. Von einem Einsatz wird aber aufgrund der unsicheren Browserunterstützung abgeraten.

Maskieren von Entities[Bearbeiten]

Um HTML-Code in HTML darstellen zu können, müssen alle HTML-eigenen Zeichen durch entsprechende Entities umschrieben werden:

  • das Zeichen < durch die Zeichenfolge &lt;,
  • das Zeichen > durch die Zeichenfolge &gt;,
  • das Zeichen & durch die Zeichenfolge &amp;,
  • das Zeichen " durch die Zeichenfolge &quot;.

Das ist eine Menge Kodier-Arbeit, bei der einen viele Software-Produkte auch allein lassen.

Anwendungsbeispiel[Bearbeiten]

Um solche Kodier-Arbeiten zu beschleunigen, kann ein kleines Tool hilfreich sein, dass einem diese Arbeit abnimmt. Der ursprüngliche Artikel von Stefan Münz aus dem aktuell.de.selfhtml-Bereich enthielt ein Perl-Script, das als CGI-Script HTML-Code maskiert.

Beispiel
<textarea id="input">
  <h2>HTML-Maskierer</h2>
  <p>Fügen Sie Ihren Text hier ein</p>
</textarea>

<pre>
  <code id="output" lang="html5">
  </code>
</pre>
Das textarea-Element im Formular dient zum Hineinkopieren des gewünschten Codes, der in HTML dargestellt werden soll. Beim Absenden des Formulars wird die Funktion maskiere() aufgerufen.
Auf den Inhalt des eingelesenen Feldes werden der Reihe nach vier reguläre Ausdrücke angewendet. Diese besorgen die Konvertierung der HTML-eigenen Zeichen in HTML-Entities. Wichtig ist, dass zuerst die Ampersand-Zeichen (&) verarbeitet werden, da alle weiteren Umwandlungen das & als einleitendes Zeichen der HTML-Entities benötigen. Am Ende gibt das Script den konvertierten Inhalt als reinen Text im ursprünglich leeren code-Element aus. Es wird von einem pre-Element umschlossen, damit der Code in dicktengleicher Schrift (monospace) formatiert wird.


Beachten Sie:
Sollten Sie PHP verwenden, so können Sie die Funktionalität des oben vorgestellten Scripts mit der Funktion htmlentities() erreichen.