Quelltexte numerieren und formatieren

Einleitung

Dieser Artikel enthält einige Vorschläge für die ansprechende und funktionale Gestaltung von Quelltext-Beispielen auf Webseiten mittels Html und Css.

Will man die beiden ersten Punkte gleichzeitig realisieren, so ist darauf zu achten, daß der Quelltext ohne Zeilennummern kopiert werden kann, damit diese nicht im Editor nachträglich entfernt werden müssen. Die hier vorgeschlagene Methode verwendet für die Anzeige der Zeilennummern das title-Attribut in Kombination mit dem Css-Pseudelement :before. Daher funktioniert die Anzeige nur in Browsern, die Css 2.1 standardkonform und vollständig umsetzen - also nicht im IE.

Die farbliche Hervorhebung im Quellcode kann auf unterschiedliche Weise erfolgen - mit Hilfe der antiquierten <font>-Tags, mit <span class="..."> Elementen - oder, wie hier vorgeschlagen, mit Elementen für logische Textauszeichnung (<strong>, <em>, <var> etc.).

Quelltext mit Zeilennummern

Beispiel 1

function test {
  $w="Hallo!"
  echo $w;
}

Ein kleines Beispiel: auf der rechten Seite werden die Zeilennummern angezeigt. Sobald man mit der Maus auf den Quelltext-Block fährt, werden die Zeilennummern ausgeblendet, so daß man per Copy&Paste nur den reinen Quelltext erhält.

Der Html-Quelltext von Beispiel 1.

<!DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
 <head>
  <title>Quellcode formatieren</title>
  <link rel="stylesheet" type="text/css"
            href="quelltext.css">
 </head>
 <body>
  <h1>Quellcode formatieren</h1>
  <pre class="sourcecode">
<code title="01">function test{</code>
<code title="02">  $w="Hallo!"</code>
<code title="03">  echo $w;</code>
<code title="04">}</code>
  </pre>
 </body>
</html>

Der Quelltext steht in einem Element für präformatierten Text (<pre>). Um das Element und seine Nachfolger nachher mittels Css gezielt zu formatieren, erhält es noch die Klasse sourcecode (Zeile 9). Die einzelnen Zeilen des Beispielcodes sind von je einem <code> Element umgeben, das als Titel die jeweilige Zeilennummer trägt (Zeilen 10-13). Die Css-Anweisungen zur Formatierung stehen in der externen Datei quelltext.css, die in Zeile 5 eingebunden wird.

Der Css-Quelltext für Beispiel 1.

pre.sourcecode code:before {
  content: attr(title)':';
  padding: 0;
  margin: 0 .5em 0 auto;
  font-weight: bold;
  color: #999;
}
pre.sourcecode:hover code:before {
  content: '\20\20\20';
}

Der erste Block (Zeile 2-6) ist für die Formatierung der <code> Elemente, die innerhalb eines präformatierten Blocks der Klasse sourcecode stehen. Mit der Pseudoklasse :before kann man Inhalte generieren, die vor dem eigentlichen Element angezeigt werden. In diesem Fall bewirkt die Zeile 2, daß der Inhalt des title-Attributs vor dem Element angezeigt wird. Die restlichen Zeilen 3-6 sind nur für das Aussehen der Zeilennummern verantwortlich.

Sobald man die Maus über den Quelltextblock bewegt, werden die Css-Anweisungen für pre.sourcecode:hover aktiv. Zeile 9 bewirkt, daß vor dem Codezeile statt der Zeilennummer nun 3 Leerzeichen (\20) angezeigt werden.

Quelltext mit farbigen Hervorhebungen

Beispiel 2

function test {
  $w="Hallo!"
  echo $w;
}

Dieses Beispiel enthält zusätzlich farbige Hervorhebungen von Schlüsselwörter, Variablennamen und Zeichenketten.

Html-Quellcode von Beispiel 2

<!DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
 <head>
  <title>Quellcode formatieren</title>
  <link rel="stylesheet" type="text/css"
            href="quelltext.css">
 </head>
 <body>
  <h1>Quellcode formatieren</h1>
  <pre class="sourcecode">
<code title="01"><strong>function</strong> <em>test</em> {</code>
<code title="02">  <var>$w</var>="<samp>Hallo!</samp>"</code>
<code title="03">  <strong>echo</strong> <var>$w</var>;</code>
<code title="04">}</code>
  </pre>
 </body>
</html>

Die verschiedenen Syntaxelemente werden weder mit <font>-Tags, noch mit <span>-Tags ausgezeichnet, sondern mit den Html-Elementen für logische Textauszeichnung wie betontem Text ( <em>), stark betontem Text(<strong>), Text für Variablen(<var>) oder Beispieltext(<samp>). Weiter unten finden Sie meine Vorschläge, welche Html-Elemente für die Syntax verschiedener Sprachen verwendet werden könnten.

Css-Quellcode für Beispiel 2

Hier folgt der Vollständigkeit halber die Css-Datei quelltext.css. Der erste Teil ist schon bekannt, der zweite wenig spektakulär, da er nur Farbe und Schriftstil der verschiedenen Elemente festlegt.

pre.sourcecode code:before {
  content: attr(title)':';
  padding: 0;
  margin: 0 .5em 0 auto;
  font-weight: bold;
  color: #999;
}
pre.sourcecode:hover code:before {
  content: '\20\20\20';
}
pre.sourcecode {
  font-family: "Courier New",monospace;
  font-size: 90%;
  white-space: pre;
  width: auto;
  background-color: #ffe;
  margin: 1ex auto 1ex 3em;
  padding: 1ex;
  border: solid 1px #ee7;
  }
code {
  padding: 0;
  margin: 0;
  }
code strong {
  color: #009;
  font-weight: bold;
  }
code em {
  color: #a00;
  font-style: normal;
  font-weight: normal;
 }
code var {
  color: #090;
  font-style: normal;
  font-weight: normal;
  }
code samp {
  color: #333;
  font-style: normal;
  font-weight: normal;
  }

Vorschläge für die Auszeichnung von Syntaxelementen

In Html gibt es keine speziellen Elemente für diverse Syntaxelemente, deshalb behilft man sich mit allgemeineren Elementen. Die Auswahl dieser Elemente ist zum Teil Geschmackssache. Hier folgt eine tabellarische Übersicht meiner Vorschläge.

Sprache strong em var samp
Html Element Attribut Vorgabewert für Attribute beliebiger Attributwert
Css (Selektoren) Selektor Pseudoklasse Attribut-Selektor Klasse
Css (Eigenschaften) - Eigenschaft Vorgabewerte für Eigenschaften beliebige Werte
Php Anweisung Funktion Variable Zeichenkette

Der Hersteller empfiehlt