Wer einen stark techniklastigen Blog mit WordPress betreibt, wird irgendwann nach einer Möglichkeit suchen, Programmcode auszuzeichnen. Es gibt eine ganze Reihe von Plugins, die diese Aufgabe recht ordentlich erledigen; ich möchte euch mit Prism.js hier aber mal eine kleine aber feine Nischenlösung vorstellen.
Prism.js ist eine von Lea Verou erschaffene Javascript Bibliothek, mit der man Programmcode auf seiner Webseite ansprechend auszeichnen und darstellen kann – also klassisches Syntax Highlighting.
Der Vorteil von Prism.js ist seine schlanke Größe (mit allen Bestandteilen erreicht die Bibliothek knapp 13 kb) bei vergleichsweise großer Funktionsvielfalt. Vergleicht das mal mit Schwergewichten wie dem Crayon Syntax Highlighter. Der kann zwar im Kopfstand Dauerwellen fönen, bringt dann aber auch schon knapp 2 Mb auf die Waage.
Es gibt vorgefertige Auszeichner für 27 Programmiersprachen, was für den Standard-Webentwickler ausreichend sein sollte, 6 Themes und 7 Erweiterungen (Plugins genannt).
Die Bibliothek muss bereits einige andere Leute überzeugt haben, denn laut Entwickler-Webseite wird Prism u.a. beim Smashing Magazine, CSS Tricks und auch A List Apart eingesetzt.
Diese Javascript Datei kann man entweder „per Hand“ in seinem HTML Header referenzieren (zusätzlich zur benötigten CSS-Datei) oder sie zu einem WordPress Plugin umwandeln oder es andere für einen tun lassen (was auch bereits getan wurde).
Weil ich faul bin und wenig Zeit für solche Basteleien habe (ich will mich hier mehr aufs Bloggen konzentrieren), war ein Plugin die konsequente Lösung. Ich setze auf Prism WP, was aber keinen besonderen Grund hat. Es war zur rechten Zeit am rechten Ort. Man lädt das Plugin hoch, aktiviert es und kann loslegen.
Der auszuzeichnende Dummycode wird immer in ein pre und code Element eingekapselt. Und zwar genau in der Reihenfolge:
<pre><code class="language-BEZEICHNER">Pseudocode</code></pre>Statt Bezeichner muss hier die Abkürzung für die Programmiersprache eingesetzt werden. Also zum Beispiel language-php für PHP-Programmcode. Es gibt dann noch mehr Mätzchen, die man mit Klassen und Attributen im pre-Element steuert, aber im Grunde war es das schon. Den Rest übernimmt Prism.
Und hier mal ein Beispiel für CSS-Style Angaben, mit Prism formatiert:
div.irgendwas
{
font-color: #66DD88;
line-height: 120%;
...
}
In anderen Syntax Highlightern kann man zwar noch weitere Sachen anbieten (Ein-/Ausklappen, Markieren-und-Kopieren, Zeilenumbruch, adhoc-Formatierungen etc.), aber für mich reichen die Möglichkeiten des Prism Highlighters völlig aus. Ein wenig Mitarbeit darf man vom Leser ja wohl auch erwarten.
