In vielen Beiträgen zeige ich Beispiele für Quellcode. Bisher waren diese Beispiele nur in einfachen <pre>-Blöcken eingebunden. Schon länger war ich auf der Suche nach einer besseren Lösung, die folgende Anforderungen erfüllen sollte:
- Nutzung von
<pre>weiterhin möglich, damit ich bestehende Artikel nicht aufwendig umbauen muss. - Zeilennummern und Syntax-Highlighting für alle benötigten Sprachen und Formate.
- Einfache Möglichkeit zum Kopieren der Texte mit einem Mausklick.
Die Lösung ist EnlighterJS. Dafür gibt es auch ein offizielles WordPress-Plugin, das sowohl im klassischen Editor mit TinyMCE wie auch in Gutenberg benutzbar ist. Dabei handelt es sich um ein JavaScript, was im Browser alle <pre>-Elemente mit entsprechenden Attributen automatisch umwandelt in eine erweiterte Ansicht. Falls JavaScript nicht aktiv ist, bleibt der Block als reiner Text-Abschnitt aber ebenfalls nutzbar.
Die Integration in bestehende Inhalte ist dabei relativ leicht: die vorhandenen <pre>-Blöcke müssen nur zusätzliche Attribute erhalten, damit sie von EnlighterJS erkannt werden:
<pre class="EnlighterJSRAW" data-enlighter-language="generic"> ... </pre>
Mit data-enlighter-language definiert man die Programmiersprache oder das Format für das Syntax-Highlighting oder "generic" für ein allgemeines Format bzw. "raw" für einen Text ohne Highlighting.
In TinyMCE gibt es einen zusätzlichen Button, mit dem man solche Blöcke recht einfach erzeugen kann. Man kann aber auch jederzeit einfach im Quelltext die Angaben ergänzen.
In bestehenden Inhalten kann man die Blöcke mit den zusätzlichen Attributen erweitern – dazu habe ich die Inhalte direkt in der Datenbank aktualisiert, was für rund eine Aktion von etwas mehr als einer Stunde war. Der Vorteil dieser Vorgehensweise ist, dass die Metadaten der Beiträge sich dadurch nicht ändern, sondern nur die <pre>-Abschnitte aktualisiert werden. Wichtig bei solchen Aktionen: vor jeder Änderung eine aktuelle Sicherung der Datenbank erstellen. Wenn man einen Cache wie Redis benutzt, muss man danach den Cache leeren, damit die geänderten Datenbankinhalte auch benutzt werden.
Anpassungen für die Darstellung
Auch wenn das Plugin gut funktioniert, wollte ich noch einige Punkte in der Darstellung anpassen:
- Die Ecken des Code-Blocks sind abgerundet – das gilt zwar als „modern“, aber ich ich finde das irritierend.
- Wenn der Code-Block weniger als etwa 4 Zeilen Text enthält, ist nicht mehr genug Platz für die Aktions-Knöpfe.
- Es wird nur eine feste Schrift verwendet und nicht der Font-Stack, den ich für
<pre>und<code>definiert habe.
Die man diese Punkte im Backend nicht anpassen kann, ist meine Lösung eine zusätzliche Regel im Stylesheet meiner Website:
.enlighter-t-enlighter {
border-radius: 0 !important;
min-height: 3.5em !important;
}
.enlighter-default {
font-family: Consolas, "Lucida Console", monospace !important;
font-size: 0.875em !important;
}
Durch die minimale Höhe von 3.5em wird sichergestellt, dass die Aktions-Knöpfe auch in kurzen Abschnitte bedienbar bleiben, wie hier:
Ein Beispiel.
