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.

banner-772x250

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.

By Alex Mills (Viper007Bond)

(87)
Last Updated: 1 Jahr ago
20.000+ Active Installs
Compatible up to: 6.4.5

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.

mivhak-syntax-highlighter

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.

wp-syntax

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.