WordPress Plugins zum Syntax Highlighting von Code Snippets
Wer regelmäßig Tutorials über Web Development oder Software Entwicklung veröffentlicht, wird häufig auf die Verwendung von Code Beispielen zurückgreifen. Für eine bessere Lesbarkeit der Codes bietet es sich an, ein WordPress Syntax Highlighting Plugin zu verwenden.
Inzwischen gibt es richtig viele Plugins zum Thema Syntax Highlighting. Ich war über die vielen Auswahlmöglichkeiten überrascht und habe deshalb zum Start dieses Blogs eine Reihe von WordPress Syntax Highlighting Plugins ausprobiert. Hier sind meine Ergebnisse.
Meine Anforderungen an ein WordPress Syntax Highlighting Plugin
Wichtig war mir:
- Möglichst schlankes, schnelles Plugin ohne viele Optionen
- Unterstützung der gängigen Sprachen eines WordPress Developers
- Gutes Aussehen bzw. Styling der Code Snippets
Mein bevorzugtes Plugin muss deshalb nicht allgemeingültig das Beste sein. Jeder hat hier wohl andere Anforderungen. Welche Plugins bevorzugt ihr?
Getestete Plugins
Ich habe etwa 3 Stunden lang eine große Menge von Plugins installiert. Bei weitem nicht alle haben es in diesen Artikel geschafft. Oft gaben nur Kleinigkeiten den Ausschlag, das Plugin auszusortieren.
Crayon Syntax Highlighter
Ein sehr beliebtes Plugin mit über 50.000 aktiven Installation und vielen Top-Bewertungen ist der Crayon Syntax Highlighter. Das Plugin lässt in Sachen Features eigentlich keine Wünsche offen. Dutzende Checkboxes erlauben die genaue Konfiguration des Plugins. Mit Unterstützung von über 60 Programmiersprachen und der Möglichkeit komplett eigene Designs anzulegen ist es das Schwergewicht unter allen Plugins.
Die Möglichkeiten des Plugins sind gleichzeitig der größte Nachteil. Für mich persönlich war das Plugin zu viel des Guten. Zuviele Optionen, die ich nicht brauche und letztlich nur Ressourcen des Servers in Anspruch nehmen. Wer aber alles genau festlegen will, für den ist das Plugin definitiv empfehlenswert.
SyntaxHighlighter Evolved
Das zweite, große Plugin mit ebenfalls 50.000+ aktiven Installationen ist SyntaxHighlighter Evolved von Alex Mills, einem Code Wrangler bei Automattic. Es ist das Plugin mit dem hellgrünen Streifen im Standard-Design, dass man als WordPress Developer wohl definitiv schon einmal gesehen hat.
Schließlich wird es unter anderem für Code Beispiele auf WordPress.com, in der WordPress.org Code Reference oder in der Dokumentation von Jetpack eingesetzt.
SyntaxHighlighter Evolved bringt meiner Meinung nach genau die richtige Anzahl an Optionen mit. Es lassen sich die grundlegenden Dinge konfigurieren, ohne dabei überladen zu wirken. Es ist eines meiner Favoriten für die Anzeige von Code Snippets mit Syntax Highlighting.
Der einzige Nachteil des Plugins ist, dass Code mithilfe von Shortcodes eingegeben wird und nicht wie üblich mit einfachen <pre> Tags. Das macht einen Wechsel des Plugins schwierig, weil die Shortcodes und Code Snippets nach einer Deinstallation unformatiert im Content übrig bleiben.
Easily post syntax-highlighted code to your site without having to modify the code at all. As seen on WordPress.com.
Mivhak Syntax Highlighter
Mivhak Syntax Highlighter ist eines der Plugins, die ich sofort nach Aktivierung wieder gelöscht habe. Grund war ein erster Blick in die Einstellungen des Plugins. Für mich sollte sich ein WordPress Plugin wenigstens etwas an das Styling des Cores halten. Bei einem solchen Options Panel wie hier gehe ich automatisch davon aus, dass sich der Entwickler auch sonst nicht an die Konventionen und Best Practices von WordPress gehalten hat.
WP Syntax (GeSHi)
WP Syntax und WP-GeSHi-Highlight sind zwei Plugins, die auf Generic Syntax Highlighter (kurz GeSHi) basieren, einer in PHP geschriebenen Library zum Syntax Highlighting. Beide Plugins sind sehr schlank, bringen keinerlei Optionen mit sich und funktionieren einfach nach der Aktivierung.
Im Grunde eigentlich tadellose Plugins. Jedoch gefällt mir persönlich einfach das Styling der Plugins nicht. Die Code Snippets wirken altbacken im Vergleich zu den anderen Plugins.
Prism Syntax Highlighter (Prism.js)
Im Gegensatz zu GeSHi ist Prism.js eine moderner, in JavaScript geschriebener Syntax Highlighter. Laut dem Entwickler ist Prism schnell, einfach und flexibel zugleich. Die leichte Basis-Version lässt sich mit Plugins wie Line Numbers, Line Highlight oder Autolinker erweitern.
Im WordPress Verzeichnis gibt es inzwischen eine Handvoll Plugins, welche Syntax Highlighting mit Prism.js als WordPress Plugin zugänglich machen. Am Besten gefallen hat mir das Prism Syntax Highlighter Plugin, welches die wichtigsten Optionen für die Wahl des Themes, der unterstützten Sprachen und Prism.js Plugins beinhaltet.
WP Code highlight.js
Neben Prism.js gibt es mit highlight.js ein weiteres JavaScript Framework für Syntax Highlighting. Es bietet wesentlich mehr Themes und Programmiersprachen als Prism, gefällt mir aber vom Design her weniger als Prism. Ein WordPress Plugin mit Unterstützung von highlight.js ist WP Code Highlight.js.
Prismatic vereint beides
Prismatic ist ein brandneues Plugin, welches sowohl Prism.js als auch highlight.js unterstützt. Es eignet sich daher ideal zum Ausprobieren beider JavaScript Syntax Highlighter.
oEmbed Gist
Eine komplett andere Methode ist die Auslagerung von Code Beispielen als Github Gists. Mithilfe des oEmbed Gist Plugins können die Code Snippets dann ganz einfach mit dem Einfügen der URL in einen Beitrag eingebunden werden. Die Kollegen von Pressengers haben für diese Methode bereits ein gutes Tutorial erstellt.
Vorteil von Github Gists ist, dass nicht mehr umständlich mit Code in den Beiträgen hantiert werden muss. Die Gists sind flexibel einsetzbar, können mehrmals eingebunden werden und zentral aktualisiert werden. Nachteilig ist, dass die Code Beispiele nicht mehr auf der eigenen Seite sondern auf Github gehostet werden. Es besteht also eine gewisse Abhängigkeit.
Fazit
Bisher setze ich vor allem auf Github Gists, um Code Beispiele hier im Blog einzubinden. Das klappt vor allem für ganze Funktionen und Klassen sehr gut. Mir fehlt etwas die Möglichkeit, zur Erklärung von Code diese in mehrere kleine Blöcke aufzuteilen. Ich denke, dass geht besser mit einem klassischen Syntax Highlighter Plugin.
Ich werde deshalb in Zukunft auch Prism Syntax Highlighter einsetzen, was sich für mich als bestes Syntax Highlighting Plugin knapp vor SyntaxHighlighter Evolved durchgesetzt hat.
Danke für den Tipp: Meine Antwort, wie ich es mache(n würde)? Auf die klassische alte Art, welche etwas mehr Zeit in Anspruch nimmt:
1.) Ich öffne PSPad, Notepad++ oder den „normalen“ Editor
2.) tippe den zu erklärenden Quelltext ein
3,) gehe auf „Suchen und Ersetzen“ und ersetze < durch &<; – > durch &>; usw.
4,) lege <pre> </pre> Tags an und kopiere den „Spaß“ dazwischen 🙂
Also im Prinzip, wie es das PlugIn umsetzt. Habe Deine Empfehlung aber installiert, trotzdem es noch mit der neuen Version von WP noch nicht ganz kompatibel ist.
Ups. Ein paar Tippfehler. Bin leider schon etwas aus der Übung 🙂 Wünsche einen schönen Start in den Donnerstag
Du hast schon Recht. Die Plugins unterscheiden sich erst einmal nicht viel von deiner Variante. Manche fügen extra Buttons im Editor zur Eingabe des Codes hinzu, bei vielen muss aber der Code ganz klassisch selbst mit <pre> Tags eingegeben werden.
Der Hauptunterschied ist wirklich das Syntax Highlighting, d.h. die Darstellung des Codes in verschiedenen Farben für Funktionen, Variablen usw. Die Plugins sind deshalb vor allem geeignet, die Lesbarkeit der Code Beispiele zu erhöhen.
Und mit dem Kopieren des Codes in den Visuellen Editor sollte WordPress eigentlich die Klammern selbst umwandeln, d.h. im Text Editor und Datenbank dann automatisch die & lt und & gt Zeichen verwenden.
Tippfehler sind kein Problem 🙂 Wünsche Dir auch einen schönen Donnerstag!
Sehr informative Seite! Danke!
Freut mich 🙂