Beim Kennenlernen des Enlighter WordPress-Plugins, das man für Syntax-Highlighting und ordentliche Formatierung von Code-Beispielen in WordPress verwenden kann, habe ich damit einiges ausprobiert. Dabei ging es mir darum, den Code authentisch darzustellen, aber auch dafür zu sorgen, dass er nicht zu langweilig aussieht.
Installation des WordPress Plugins Enlighter – Customizable Syntax Highlighter
Um das WordPress Plugin Enlighter – Customizable Syntax Highlighter zu installieren, geht man zur Plugin-Installationsseite im WordPress-Dashboard. Ich habe bereits in einem anderen Beitrag im Detail beschrieben, wie ein Plugin in WordPress installiert wird. In diesem Fall tippt man im Suchfeld Enlighter ein und findet folgendes zur Auswahl:
Dabei sieht man, dass das Plugin alle nötigen Merkmale eines aktuellen und vertrauenswürdigen Plugins aufweist. Durch zwei Klicks, zunächst auf Jetzt installieren und danach auf Aktivieren hat man schnell die Funktionalität des Plugins zur Verfügung.
Was leistet das WordPress Plugin Enlighter – Customizable Syntax Highlighter und welche Vorteile hat es?
Das Enlighter-Plugin dient dazu, Code-Beispiele bzw. Quellcode auf einer WordPress Website als solche darzustellen. Dabei sind verschiedene Aspekte wichtig, die ich auch im hier gerade verlinkten Artikel beschrieben habe. Die wichtigsten davon sind:
- Die Möglichkeit, Code entweder Inline (also in der Zeile) oder als abgesetzten Block darzustellen
- Die Syntax verschiedener Programmiersprachen durch Einfärben bestimmter Befehle oder Programmsequenzen übersichtlicher darzustellen (Syntax Highlighting)
- Die Formatierung des Codes, z.B. samt Einrückungen am Anfang einer Code-Zeile, korrekt darzustellen
- Zeilennummern am Anfang der Zeilen anzuzeigen
- Einfache Möglichkeiten zu schaffen, das Code-Beispiel oder Teile davon zu kopieren
Einige dieser Funktionen sind über Einstellungen veränder- oder zuschaltbar, z.B. die Zeilennummern. In den nächsten Abschnitten gehe ich zunächst und hauptsächlich auf Einstellungen für die Darstellung der Code-Beispiele ein. Zum Schluss folgen noch ein paar Anmerkungen zur restlichen Funktionalität.
Grundeinstellungen für das WordPress Plugin Enlighter – Customizable Syntax Highlighter
Die Grundeinstellungen für das Enlighter-Plugin betreffen folgende Punkte:
- Das Theme für das Plugin und die dadurch erzeugten Code-Beispiele
- Die Standard-Programmiersprache, von der das Plugin beim Syntax-Highlighting ausgehen soll, falls keine Programmiersprache explizit für einen Code-Block angegeben ist
- Wie die Einrückungen am Beginn der Code-Zeilen umgesetzt werden sollen
- Ob Zeilennummern eingeblendet werden sollen oder nicht
- Ob man durch das Darüberhalten des Mauszeigers eine Zeile optisch hervorheben möchte oder nicht
- Wie man den Code ohne Syntax-Highlighting zu sehen bzw. zu kopieren bekommt
- Welche Optionen bzw. Links zu jedem Code-Block angezeigt werden sollen
Vergleich der Themes für das WordPress Plugin Enlighter – Customizable Syntax Highlighter
Da es einige Themes für die Code-Beispiele gibt, ist die Auswahl eines Favoriten etwas mühsam. Damit man nicht alle durchprobieren muss, habe ich hier ein Code-Beispiel (in python) als Code-Block mit allen verfügbaren Themes zum Vergleich nacheinander dargestellt. Zeile Nummer 4 ist dabei besonders hervorgehoben und der Mauszeiger-Effekt ist an.
WPCustom
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Enlighter
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Godzilla
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Beyond
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Classic
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
MooTwo
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Eclipse
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Droide
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Minimal
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Atomic
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Rowhammer
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Git
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Mocha
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Inline-Style, Zeilennummern, Hervorheben und Effekte in Enlighter – Customizable Syntax Highlighter
Der inline-Stil für jeglichen Code sieht übrigens folgendermaßen aus: import numpy as np. Bei einem Code-Block hat man wie gesagt noch ein paar Einstellungsmöglichkeiten: Lässt man die Zeilennummern weg, dann sieht das z.B. so aus:
Mocha
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Dabei ist aber zu bedenken, dass sehr lange Zeilen automatisch in der vorhandenen Box umgebrochen werden. In so einem Fall lohnen sich die Zeilennummern, um das zu verdeutlichen:
import numpy as np
def weirdgaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2) * np.log(-(x-m)**2/(2*s**2)) * np.sin(-(x-m)**2/(2*s**2)
return fun
Der Vorteil des Umbrechens der Zeilen ist klarerweise, dass immer der gesamte Quellcode sichtbar ist.
Die Einstellungen für das Hervorheben der Zeile unter dem Mauszeiger und die Buttons rechts oben auf dem Code-Beispiel-Block lassen sich übrigens nur für alle Code-Beispiele global ändern. Im Gegenzug dazu kann das Theme bei jedem Code-Beispiel-Block individuell eingestellt werden.
Sontiges zum WordPress Plugin Enlighter: Fonts, Umstieg von einem anderen Plugin
Weitere interessante Einstellungen betreffen z.B. die verwendeten Monospace-Fonts, sowie den möglichen Umstieg von älteren bzw. anderen Plugins für Syntax-Highlighting. Dabei ist es unter Umständen möglich, ohne weiteren Aufwand eingebundene Code-Beispiele auf bereits bestehenden Beiträgen auf der eigenen WordPress-Website zu Enlighter-kompatiblen Blocks zu erklären. Dadurch werden auch jene im neuen Design dargestellt.
Weitere Einstellungen und Informationen zum WordPress Plugin Enlighter – Customizable Syntax Highlighter
Weitere Optionen und Einstellungen betreffen die Verwendung von CDNs, also Content-Delivery Networks, und worauf man dabei achten muss. Außerdem kann man eine Funktion nutzen, welche die nötigen Skripte nur lädt, wenn es auf der gerade vom Website-Besucher angesehenen Seite auch tatsächlich Code-Beispiele gibt. Das verbessert die Ladegeschwindigkeit der Website.
Das Enlighter-Plugin für WordPress gibt es auch auf Github, wo sich unter anderem auch eine recht ausführliche Dokumentation (auf Englisch) findet.
Das Enlighter-Plugin funktioniert übrigens auch mit dem neuen WordPress-Editor Gutenberg. In einem anderen Artikel hier auf WebsiteBerater.com habe ich bereits beschrieben, wie man man in WordPress Gutenberg schreibt bzw. was man dabei beachten sollte.
Ein Code-Beispiel mit dem WordPress-Plugin Enlighter erstellen
Mit dem WordPress Plugin Enlighter kann man sowohl im neuen WordPress Editor Gutenberg als auch mit dem Classic Editor ganz einfach und rasch Code-Beispiele im Text auf einer WordPress-Website anzeigen lassen. Das funktioniert sowohl für die oben bereits erwähnte inline-Variante, als auch als Code Block. Die Details dazu habe ich bereits in meinem Artikel So geht’s: Code-Beispiele auf der WordPress-Website beschrieben. Bitte lesen sie dort weiter, um mehr darüber zu erfahren.
