WordPress bringt zwar von Haus die Funktion mit Code für Programmiersprachen besonders hervorzuheben, nämlich mithilfe des Pre-Tags, verfügt aber leider nicht über Syntax-Hightlighting.

Da ich in diesem Blog auch immer mal mit verschiedenen Code-Schnipseln um mich werfe, bin ich nun schon eine ganze Zeit lang am austesten verschiedener Plugins. Nachdem ich mehreres durchprobiert habe, bin ich nun wieder zu WP-Syntax zurückgekehrt, dass ich bereits ganz zu Anfang mal installiert hatte.

Der große Vorteil ist die sehr leichte Handhabung. Diese will ich im folgenden einmal vorstellen.

Quelle des Plugins

Nachdem ihr das Plugin installiert habt:
wechselt zunächst vom Visuell in den HTML-Modus eures Editors (falls ihr nicht ohnehin schon im HTML-Modus schreibt). Nur dort ist es möglich, dass HTML-Codes richtig erkannt werden, im visuellen Modus wird dieser automatisch bereinigt, das heißt die spitzen Pfeile, die jeden Tag einschließen, werden ersetzt, so dass der Browser den HTML-Code nachher nicht mehr interpretiert, sondern so darstellt, wie man ihn auch im visuellen Modus zu Gesicht bekommt.

Vorsicht! Wer während des Hantierens mit dem Syntax-Editor vom HTML- in den Visuell-Modus wechselt, riskiert, dass sein eingefügter Code verloren geht.

Verwenden könnt ihr den Syntax-Highlighter mit folgendem HTML-Code:

<pre lang="lang" line="1">
Skriptsprache hier
</pre>

Dabei steht das Attribut lang für die Skriptsprache, die nach einem vorgegebenen Muster farblich gestaltet werden soll. In der offiziellen Beschreibung des Plugins findet ihr eine Übersicht der unterstützten Sprachen. Wird die Sprache nicht unterstützt oder habt ihr euch vertippt, dann wird der Text zwischen den Pre-Tags so dargestellt, wie er ohne Angabe der speziellen Attribute auch zu sehen wäre.

Also so:

<pre lang="lang" line="1">
Skriptsprache hier
</pre>

Da sieht obiges doch um einiges übersichtlicher aus, oder?
Und so macht auch nicht mir das Präsentieren von Code-Schnipseln mehr Spaß, auch die Besucher dürften sich über das Mehr an Übersichtlichkeit freuen.

Das Attribut line gibt an, ob ihr Zeilenangaben anzeigen lassen wollt, oder nicht. Wer hier etwas anderes als 1 eingibt, definiert damit die erste Zahl, mit welcher die Zählung beginnen soll. Das ist vor allem sinnvoll, wenn ihr einen bestimmten Codeabschnitt aus einer längeren Datei entnehmt und es euren Besuchern erleichtern wollt, die entsprechende Stelle selbst wiederzufinden.

Im folgenden ein paar Beispiele:

Beispiel 1: PHP-Code ohne Zeilennummern

Attribute: lang=”php”

< ?php
  echo "Hallo Welt";
?>

Beispiel 2: HTML-Code mit Zeilennummern

Attribute: lang=”html4strict” und line=”1″

1
2
3

<div class="test">
  Textnachricht in Block
</div>

Beispiel 3: Java-Code mit Zeilennummern startend bei 25

Attribute: lang=”java” und line=”25″

25
26
27
28
29
30

	int [] a = new int[5];
 
	for(int i=0; i<5; i++) {
		a[i] = i;
		System.out.println(a[i]);
	}

Beispiel 4: escapter HTML-Code

Darunter versteht man genau so einen Code wie ihn der visuelle Editor beim einfügen von HTML-Code mittels Copy&Paste erzeugen würde.

Attribute: lang=”html4strict” und escaped=”true”

<pre lang="lang" line="1">
Skriptsprache hier
</pre>

Man sieht, dass hier die Darstellung genauso aussieht wie bei ganz normalem HTML, allerdings sieht die Eingabe anders aus:

<pre lang="lang" line="1">
Skriptsprache hier
</pre>