Im meinem letzten Beitrag habe ich ein paar Basis-Plugins für WordPress vorgestellt. Diesmal geht es um ein Plugin, welches ich einsetze um die Quellcodes hier im Blog optisch ansprechend darzustellen.

Nach kurzen Recherche hab ich mich hierbei für das WordPress Plugin Enlighter entschieden, da es eine elegante Integration in den neuen Gutenberg Editor bietet und eine gute Unterstützung für meine bevorzugten Code-Sprachen mitbringt.

Was braucht man eigentlich?

In meinen IT-Blog poste ich regelmäßig Code-Snippets oder Shell-Anweisungen um Sachverhalte verständlich zu machen. Hierfür möchte ich natürlich eine Komponente nutzen, die diese Inhalte sinnvoll darstellt und leicht zu handhaben ist.

Konkret sind für mich folgende Funktionen interessant:

  • Highlighting für PHP, HTML, CSS, Javascript und Bash-Scripte
  • Unterstützung für Zeilennummern um darauf ggf. im Text zu referenzieren
  • möglichst einfache und nahtlose Integration in WordPress
  • DSGVO-konform, werbe- und kostenfrei, möglichst Open Source

Natürlich ist es nett, wenn auch andere Features unterstützt werden, aber ich bin grundsätzlich ein Freund davon jede unnötige zusätzliche Komplexität zu vermeiden. Insofern sollte die Komplexität – wenn vorhanden – möglichst nicht im Weg stehen.

Integration in WordPress

Während ich bei bestimmten Themen gern bereit bin mit experimentellen oder eigenwilligen Lösungen zu arbeiten, gibt es auch Bereiche, mit denen will ich mich nicht mehr als nötig beschäftigen. Auf dieses Thema trifft eindeutig das letztere zu.

Daher hat mich die Integration in den Editor gleich positiv überrascht. Es gibt keine komplizierte Benutzerführung, sondern man wählt einfach den Block und los geht’s:

Auswahl des Blocks
Darstellung des Code-Elements

Auch bei der Integration im WordPress Backend gibt es nichts zu kritisieren. Es gibt ein ansprechendes einfarbiges Icon und eine aufgeräumte Tabansicht der Optionen:

Integration im WordPress Backend

God said: “let there be (high-)light“

Ok, für die Integration gibt’s volle Punktzahl. Aber wie schlägt sich das Plugin bei der Hauptfunktion, dem Code Highlighting? Was davon zu erwarten ist? Und welche Code-Sprachen unterstützt es eigentlich?

Enlighter bringt Support für eine lange Liste der wichtigsten Code-Sprachen mit, darunter alle, die ich benötige. Zusätzlich gibt es ein “generisches Highlighting”, welches als Standard genutzt wird. Weiterhin gibt es auch die Möglichkeit “kein Highlighting” zu nutzen. In diesem Fall wird dann einfach der blanke Code anzeigt.

Liste der unterstützten Sprachen

Wem das nicht reicht, der kann – nach Lektüre der Developer Documentation – eigene Erweiterungen und Sprachen einfügen. Es gibt sogar eigene Extensions für das Plugin. Überhaupt lässt sich offenbar sehr viel damit anstellen, hier kann man sich bei Bedarf also austoben. Für die meisten Nutzer werden die Bordmittel aber ausreichend sein.

Styling über Themes möglich

Was man vermutlich eher anpassen möchte, ist die optische Darstellung des Codes hinsichtlich Farbe, Hintergrund, Rahmen und dergleichen. Dies löst Enlighter über entsprechende Themes. Auch hier wird schon viel mitgeliefert.

Liste der Themes

Die vorkonfigurierten Themes decken sowohl eher einfache als auch ausgefallenere Standard-Stile ab und sind teilweise nach bekannten GUIs benannt.

Hier eine kleine Auswahl:

/* Stil: Enlighter */
if ($result = $mysqli->query("SELECT Name FROM City LIMIT 10")) {
    printf("Select returned %d rows.\n", $result->num_rows);
    $result->close();
}
/* Stil: Classic */
if ($result = $mysqli->query("SELECT Name FROM City LIMIT 10")) {
    printf("Select returned %d rows.\n", $result->num_rows);
    $result->close();
}
/* Stil: Mocha */
if ($result = $mysqli->query("SELECT Name FROM City LIMIT 10")) {
    printf("Select returned %d rows.\n", $result->num_rows);
    $result->close();
}

Eine volle Übersicht aller verfügbaren Themes inklusive Beispieldarstellung findet sich in der Theme Demo auf der Website des Enlighter Plugins. Das ist schon sehr mächtig und hier sollte für jeden was dabei sein. Natürlich sind die Themes auch anpassbar oder man kann eigene Themes hinzufügen.

Sonstige Anforderungen und Fazit

Bei der Liste der Anforderungen habe ich noch Zeilennummern genannt. Ich finde das einfach schick, weil es die Lesbarkeit besonders bei längeren Passagen erhöht. Auch hier glänzt Enlighter. Sowohl global als auch pro Code-Element ist konfigurierbar, ob Zeilennummern genutzt werden sollen. Zudem kann man ein Offset definieren, so dass die Zählung nicht bei 1 beginnen muss. Das kann nützlich sein, wenn man sich auf bestehenden Code bezieht. Darüber hinaus kann man bestimmte Zeilen als “Special Lines” hervorheben. Das deckt alles ab, was ich an dieser Stelle nutzen möchte.

Zu den “Hygienefaktoren” der Extension kann ich ebenfalls feststellen, dass hier alles dabei ist, was man sich heutzutage so wünscht:

  • laut Website DSGVO-konform, da keine externen Requests abgesendet werden
  • der Quellcode ist komplett auf GitHub als Open Source verfügbar, so dass man dies bei Bedarf auch prüfen kann
  • ich habe keinerlei Werbung gefunden und auch keine Zahlungsaufforderung

Auch sonst muss man dem Entwickler Andi Dittrich ein Kompliment aussprechen. Die Extension wirkt aufgeräumt, durchdacht und funktioniert tadellos. Das ist wirklich ein überzeugendes Stück Software und macht mir viel Freude. :)