Wiki-Syntax Teil 2: Quelltexte

Es wird gezeigt, welche Möglichkeiten es gibt in einen Artikel Quelltexte einzubinden.

Einführung

Quelltexte können entweder als kompletter Block in einem Kasten dargestellt werden oder eingebunden in Fließtext (inline).

Bei der Darstellung im Block gibt es zwei Möglichkeiten:

  1. Darstellung ohne Syntax-Highlighting
  2. Darstellung mit Syntax-Highlighting.

Darstellung von Quelltext-Blöcken mit dem HTML-Element <pre>

Hinweis zur Darstellung des HTML-Elementes <pre>

Das HTML-Element <pre> wird in der Wiki-Syntax verwendet, um Quelltext-Blöcke so darzustellen, wie sie vom Nutzer eingegeben wurden. Es ist daher nicht möglich, innerhalb eines Quelltext-Blockes das HTML-Element <pre> zu verwenden, da es als Anweisung für den Beginn oder das Ende eines Quelltext-Blockes interpretiert wird.

Wenn in den folgenden Erklärungen die Wiki-Syntax angegeben wird, um einen bestimmten Quelltext-Block darzustellen, wird stets <<pre>> beziehungsweise <</pre>> geschrieben, wo eigentlich <pre> oder </pre> stehen sollte.

Quelltexte ohne Syntax-Highlighting

Soll ein Quelltext als Block und ohne Syntax-Highlighting dargestellt werden, muss er nur in das HTML-Element <pre> eingeschlossen werden:

Soll zum Beispiel die folgende Zeile in einem Kasten gezeigt werden:

System.out.println("Hello World!");

so muss folgender Wiki-Text eingegeben werden:

<<pre>>
System.out.println("Hello World!");
<</pre>>

(Wie oben gesagt, muss das HTML-Element <pre> mit einfachen spitzen Klammern verwendet werden.)

Der Einschluss des Quelltextes innerhalb des HTML-Elementes <pre> bewirkt zweierlei:

  • Alle Zeichen - auch Sonderzeichen - werden so dargestellt wie man sie eingibt
  • dies gilt auch für Leerzeichen und Leerzeilen.

Ausnahme ist nur das HTML-Elementes <pre>, das schon vergeben ist, um die Quelltext-Blöcke zu kennzeichnen.

Das folgende Beispiel soll dies ausdrücklich zeigen. Um das Code-Schnipsel zu erzeugen:

// main-Methode:

public static void main()
{
    System.out.println("Hello World!");
}

muss man eingeben:

<<pre>>
// main-Methode:

public static void main(String[] args)
{
    System.out.println("Hello World!");
}
<</pre>>

Quelltexte mit Syntax-Highlighting und Zeilennumerierung

Werden die Quelltexte wie im letzten Abschnitt beschrieben eingegeben, besitzen sie noch keinerlei Syntax-Highlighting. Dies kann mit dem style-Attribut des <pre>-Elementes erzeugt werden. Der Wert des style-Attributes ist die Sprache, in der der Quelltext geschrieben ist.

Um etwa für obige main-Methode das Syntax-Highlighting von Java anzusprechen, muss innerhalb von <pre> das Attribut style="java" gesetzt werden.

Der folgende Wiki-Text

<<pre style="java">>
// main-Methode:

public static void main(String[] args)
{
    System.out.println("Hello World!");
}
<</pre>>

erzeugt somit den Quelltext mit Java-Syntax-Highlighting:

// main-Methode:

public static void main(String[] args)
{
    System.out.println("Hello World!");
}

Zusätzlich werden die Zeilnnummern gesetzt.

Quelltexte im Fließtext mit dem HTML-Element <code>

Für kurze Quelltext-Abschnitte, die in den Fließtext integriert werden sollen, wird das HTML-Element <code> verwendet. Soll etwa der folgende Satz dargestellt werden:

Die Methode public static void main(String args) wird bei der Ausführung eines Programmes automatisch aufgerufen.

So lautet der Wiki-Text:

Die Methode <code>public static void main(String[] args)</code> wird bei der Ausführung eines Programmes automatisch aufgerufen.

Soll zusätzlich Syntax-Highlighting erzeugt werden, so wird im HTML-Element <code> das Attribut style gesetzt; alles was oben zum Syntax-Highlighting bei Quelltext-Blöcken gesagt wurde, gilt auch für inline-Quelltexte.

Soll zum Beispiel obiger Satz mit dem Syntax-Highlighting von Java versehen werden, lautet der Wiki-Text:

Die Methode <code style="java">public static void main(String[] args)</code> wird bei der Ausführung eines Programmes automatisch aufgerufen.

und das Ergebnis ist:

Die Methode <code style="java">public static void main(String args) wird bei der Ausführung eines Programmes automatisch aufgerufen.

Verfügbare Sprachen

Die folgenden Tabelle geben Auskunft darüber, für welche Sprachen ein Syntax-Highlighting erzeugt werden kann und welchen Wert das style-Attribut besitzen muss.

Programmiersprachen

Sprache Wert des style-Attributes
C-Familie von Programmiersprachen clike
C c
C++ cpp
C Sharp (C#) csharp
Java java
.NET dotnet
PHP php
Dart dart
Go go
Groovy groovy
Swift swift
JavaScript javascript
TypeScript typescript
R r

Auszeichnungssprachen

Sprache Wert des style-Attributes
HTML (Hypertext Markup Language) html
XML (Extensible Markup Language) xml
MathML (Mathematical Markup Language) mathml
SVG (Scalable Vector Graphics) svg

Stylesheet-Sprachen

Sprache Wert des style-Attributes
CSS (Cascading Style Sheets) css
LESS (dynamische Erweiterung von CSS) less
SCSS scss

Andere Sprachen

Sprache Wert des style-Attributes
Structured Query Language (SQL) sql
JavaScript Object Notation (JSON) json
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.