HTML/Tutorials/Code in HTML darstellen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
HTML


Dieses Tutorial zeigt, wie man Quelltext (englisch: source code) und HTML-Markup in Webseiten präsentieren kann.

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.

Code-Blöcke[Bearbeiten]

Neben der Auszeichnung durch semantisch passende Elemente ist es für Programmlistings wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass Whitespace wie Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

pre[Bearbeiten]

Das Element pre repräsentiert einen vorformatierten (engl.: preformatted) Textblock, in dem die Strukturen durch typografische Konventionen und nicht durch seinen Inhalt oder semantische Elemente gekennzeichnet ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Ausgabe von php-Code ansehen …
<h1>„Hallo, Welt!“ in PHP</h1> <pre> <code class="language-php"> <?php echo "Hallo, Welt\n"; ?> </code> </pre>

<pre> leitet einen Textabschnitt mit präformatiertem Text ein. </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde. Das gilt insbesondere für Leerzeichen.

code[Bearbeiten]

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den Inhalt mit einem code-Element zu umfassen. Es zeichnet einen Teil eines Fließtextes als Quelltext, engl. code aus.

Beispiel ansehen …
<pre> <code class="language-perl"> #perl! use warnings; use strict; print "Content-type:text/plain; charset=UTF-8\r\n\r\n"; print "Hello World!\n"; </code> </pre>

Der code-Block ist in ein pre-Element geschachtelt.

Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, eine Courier-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein Innenabstand von 1em definiert.


Sie können ein code-Element innerhalb von pre schachteln, um die Formatierung durch Zeilenumbrüche und Einrückungen zu erreichen. Den gleichen Effekt können Sie aber auch mit CSS erzielen:

Beispiel ansehen …
code {
  font-family: monospace;
  white-space: pre;
}
<code class="language-pascal">
Program Lesson1_Program3;
Var       
    Num1, Num2, Sum : Integer;

Begin {no semicolon}
	Write('Input number 1:'); 
	Readln(Num1);
	Writeln('Input number 2:');
	Readln(Num2);
	Sum := Num1 + Num2; {addition} 
	Writeln(Sum);
	Readln;
End.     
</code>

Im Beispiel ist ein Programm in TurboPascal aufgelistet. Durch white-space:pre wird die Formatierung des Listings erhalten. Dazu wird mit font-family eine nicht-proportionale Schrift verwendet.

Sprachkennzeichnung[Bearbeiten]

Sie können das code-Element um eine Angabe der Programmiersprache erweitern. Auch wenn das lang-Attribut dafür prädestiniert erscheint, ist es nur für gesprochene Sprachen vorgesehen.

Empfehlung: Verwenden sie zur Kennzeichnung des Codes ein class-Attribut mit dem Wert language-...

var und samp[Bearbeiten]

Einzelne Variablen, Konstanten und Größen können Sie mit dem var-Element auszeichnen.

Das var-Element am Beispiel des Satz des Pythagoras
<p> <var>a</var>² + <var>b</var>² = <var>c</var>² </p>

Im Beispiel werden die Variablen a, b und c in var-Elementen ausgezeichnet. Dabei wäre es zu überlegen, die gesamte Formel in MathML auszuzeichnen.

Das Element samp zeichnet einen Teil eines Fließtextes als beispielhafte Ausgabe eines Programms aus, engl. sample output.

HTML-eigene Zeichen maskieren[Bearbeiten]

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- oder XML-Code dargestellt werden soll. HTML-Markup in HTML wird aber immer vom Browser geparst, auch wenn er innerhalb von code und pre-Elementen notiert wird.

Durch die Verwendung von Unicode ist es nicht mehr nötig, Umlaute zu maskieren. Wenn in Ihrem Text jedoch Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren:

  • Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp; ("Ampersand")
  • Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")
  • Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")
  • das Zeichen " durch die Zeichenfolge &quot;.
    Dies ist vor allem in Attributwerten sinnvoll.
Beispiel
  • Das ist ein &lt;HTML-Tag&gt;
  • GmbH &amp; Co. KG
  • <a href="https://example.com/?id=5&amp;foo=bar">
  • <strong title="bekannt durch den Ausspruch &quot;Ich weiß, dass ich nichts weiß.&quot;">der griechische Philosoph Sokrates</strong>
Beachten Sie vor allem die spitze öffnende Klammer (<). Wenn Sie dieses Zeichen nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit durcheinander, weil er glaubt, nun würde ein HTML-Tag folgen. Außerdem müssen Sie in href-Attributen das Ampersand maskieren.

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

Anwendungsbeispiele[Bearbeiten]

HTML-Maskierer[Bearbeiten]

Um solche Kodier-Arbeiten zu beschleunigen, kann ein kleines Tool hilfreich sein, das 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.
Das erzeugte maskierte Markup wird in ein code-Element übertragen.
HTML-Maskierer ansehen …
  var str = document.querySelector('#input').innerHTML;

  document.getElementById('button').addEventListener('click', function() {
    htmlSpecialChars(str)}, true);

 
  function htmlSpecialChars(str) {
	const specialChars = {	
		'&': '&amp;',
		'<': '&lt;',
		'>': '&gt;',
		'"': '&quot;',
		"'": '&apos;'}
    str.replace(/[&<>"#]/g, find => specialChars [find]);
	
	document.getElementById('output').innerText = str;
  }
Beim Absenden des Formulars wird die Funktion htmlSpecialChars() aufgerufen.

Auf den Inhalt des eingelesenen Feldes werden mit String.replace der Reihe nach fünf HTML-eigene Zeichen in entsprechende HTML-Entities umgewandelt. 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 htmlspeacialchars_decode() erreichen.

ASCII-Art[Bearbeiten]

Mit dem pre-Element ist es auch möglich ASCII-Art in seinen richtigen Proportionen darzustellen:

Beispiel ansehen …
<pre>
   .
   |
   |   
   |
   #         +------------------------------+
  (=)        |           ACHTUNG!           |
   H         |      PRÄFORMATIERTER TEXT!   |            =o=
   H         |                           __;                 ~^
   H         +------------TT-----------°            _               _ _  
   H                      ||    ________________   | |             | (_)   
   H                      ||    | SELF-Treffen >   | |__   ___ _ __| |_ _ __ 
   M       oÖo            ||    |°°°°°°°°°°°°°°°   | '_ \ / _ \ '__| | | '_ \ 
   M        |  ö          ||    |                  | |_) |  __/ |  | | | | | |  
  / \~"""~"""~"""~"""~"""~"""~"""~~"""~"""~"""~""""|_.__/ \___|_|  |_|_|_| |_|
</pre>

Das pre-Element enthält ein Bild, dass aus einzelnen Zeichen „gemalt“ wurde. Hierbei sind die einzelnen Positionen innerhalb des Rasters aus Zeilen und Spalten wichtig.