Wiki-Syntax Teil 2: Quelltexte
Es wird gezeigt, welche Möglichkeiten es gibt in einen Artikel Quelltexte einzubinden.
- Einführung
- Darstellung von Quelltext-Blöcken mit dem HTML-Element <pre>
- Hinweis zur Darstellung des HTML-Elementes <pre>
- Quelltexte ohne Syntax-Highlighting
- Quelltexte mit Syntax-Highlighting und Zeilennumerierung
- Quelltexte im Fließtext mit dem HTML-Element <code>
- Verfügbare Sprachen
- Programmiersprachen
- Auszeichnungssprachen
- Stylesheet-Sprachen
- Andere Sprachen
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:
- Darstellung ohne Syntax-Highlighting
- 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 |