Wenn du einen WordPress-Blog betreibst, der sich mit der Entwicklung von Software, Webdesign oder WordPress beschäftigt, dann möchtest du sicherlich Code-Schnipsel in deine Artikel einbinden. Standardmäßig hat WordPress keine Option, Code vernünftig darzustellen. Denn aus Sicherheitsgründen filtert das Content Management System jeglichen rohen Code, der in die Beiträge und Widgets eingefügt wird. Jeder eingegebene Code muss mit HTML-Sonderzeichen maskiert werden. Das ist unpraktisch und unschön, deshalb beschäftigen wir uns in diesem Beitrag mit zwei guten Lösungen für die Code-Anzeige.
Code-Darstellung Nr. 1: Das SyntaxHighlighter Evolved Plugin
SyntaxHighlighter Evolved ist eines der besten Plugins zur Darstellung von Code in WordPress. Es ist sehr einfach zu nutzen und bietet Code-Highlighting für viele verschiedene Programmier- und Auszeichnungssprachen. Das Endergebnis im Artikel sieht professionell aus und das Plugin lädt den Codebereich relativ schnell.
Wie gezeigt können auch einzelne Code-Zeilen hervorgehoben werden. Die Nutzung funktioniert über Shortcodes.
Beispiele:
Die folgenden Shortcodes in den Editor von WordPress eingeben und das Plugin wandelt den Code automatisch in eine ansprechende Gestaltung um.
PHP:
CSS:
Ein Auszug aus den vielfältigen Einstellungen des Plugins:
- Entwickler: Alex Mills (Viper007Bond)
- Wird ständig weiter entwickelt: Ja
- Letzte Version vom: 17.06.2015
- Kosten: kostenfrei über WordPress.org
- Lizenz: GNU GENERAL PUBLIC LICENSE
- Wechselwirkungen mit anderen Plugins: nicht bekannt
- Entwickler-Homepage: SyntaxHighlighter Evolved Demoseite
- Download von WordPress.org
Vor- und Nachteile des Plugins
Die Darstellung des Codes auf der Website kann mit einigen vordefinierten Themes optisch verändert werden, was eine nette Spielerei ist. Nötig ist es wohl nicht. Die Vorteile des Plugins liegen in der sehr guten optischen Darstellung der Code-Blöcke und auch darin, dass benötigte CSS- und JavaScript-Dateien nur in den Quelltext eingefügt werden, wenn tatsächlich ein Code-Schnipsel im Artikel vorhanden ist. Ist keiner vorhanden, werden keine Dateien eingebunden, was der Performance der Website sehr zuträglich ist.
Allerdings hat das Plugin den Nachteil, dass nur Code angezeigt, jedoch nicht verwaltet werden kann. Das ist für Entwickler, die oft mit vielen Code-Schnipseln arbeiten, sehr unpraktisch.
Code-Darstellung Nr. 2: Gists von GitHub einbinden
Die Gists von GitHub erfreuen sich einer großen Beliebtheit, denn dort kann man seine kompletten Code-Schnipsel auslagern und an einer Stelle zusammenfassen. Auf diese Weise hat man immer Zugriff auf die Code-Fragmente und kann sie zudem mit anderen Entwicklern teilen. Die Darstellung des Codes ist ansprechend und abhängig von der verwendeten Programmier- oder Auszeichnungssprache. Was läge näher, als die Gists dann auch in WordPress einzubinden? Doch genau das funktioniert leider nicht so einfach, wie man es gerne hätte. Auch hierfür ist ein Plugin nötig.
Ein GitHub-Account ist nicht nötig, jedoch sinnvoll
Um Gists zu erstellen und diese im Anschluss in den WordPress-Beiträgen zu verwenden, ist prinzipiell kein Account bei GitHub nötig. Man kann dort seine Gists auch anonym anlegen. Doch Sinn ergibt das nicht, denn der große Vorteil von GitHub, die zentrale Verwaltung aller Code-Schnipsel, ist dann dahin. Die Erstellung eines Accounts zur Nutzung aller Vorteile, die GitHub bietet, ist kostenlos.
Ein anonymes Gist erstellen | eEinen Account bei GitHub anlegen
Das oEmbed Gist Plugin
Dieses kleine Plugin sorgt für die komfortable Einbettung von Gists in die WordPress-Beiträge. Einmal aktiviert ist die Handhabung denkbar einfach: den Link zum Gist kopieren und in den Editor einfügen. Fertig!
Link zum Gist kopieren
Link in den visuellen WordPress-Editor einfügen
Das Endergebnis auf der Website
- Entwickler: Takayuki Miyauchi
- Wird ständig weiter entwickelt: Ja
- Letzte Version vom: 17.11.2015
- Kosten: kostenfrei über WordPress.org
- Lizenz: GNU GENERAL PUBLIC LICENSE
- Wechselwirkungen mit anderen Plugins: nicht bekannt
- Entwickler-Homepage: Nicht vorhanden
- Download von WordPress.org
Vor- und Nachteile des Plugins
Nachteile sind meiner Meinung nach nicht zu finden, denn auch hier werden die Dateien zur Darstellung nur integriert, wenn sie auch benötigt werden. Der große Vorteil ist jedoch die zentrale Verwaltung aller bereits vorhandenen Code-Schnipsel, wenn man sich einen Account bei GitHub erstellt. Alle Code-Blöcke an einem Platz mit der zusätzlichen Möglichkeit, alle Dateien schnell mit anderen zu teilen. Ein kostenloser Account erlaubt nicht nur die Verwaltung von Code-Schnipseln, sondern auch ganzer Projekte, zu denen sich weitere Entwickler zur Mitarbeit einladen lassen.
Fazit
Zwei frische Lösungen zum Einbinden von Code in die Blogposts haben wir vorgestellt. SyntaxHighlighter Evolved ist sicherlich gut, wenn man nicht allzu viele Code-Blöcke zeigen möchte. Wer jedoch mit sehr vielen Code-Schnipseln arbeitet, sollte sich einen kostenlosen Account bei GitHub anlegen und die Lösung über die eingebetteten Gists wählen. Nicht umsonst haben alle bekannten WordPress-Entwickler einen Account bei GitHub.
Weitere aktuelle WordPress-Plugins
- Dr. Web: Zehn frische kostenlose WordPress-Plugins aus dem Oktober 2015
- Dr. Web: Ganz frisch: 10 neue, kostenlose WordPress-Plugins aus November 2015
- Dr. Web: 10 kostenlose WordPress-Plugins motzen deinen Blog auf | Dezember 2015
(dpe)
5 Antworten zu „Zwei frische Lösungen für die Code-Darstellung in WordPress“
— was ist Deine Meinung?
Ich sehe hier leider trotzdem einige Probleme, über die jeder Nutzer nachdenken sollte.
Was ist, wenn das Plugin deaktiviert wird, aus welchem Grund auch immer, sei es nicht mehr gepflegt. Damit landet im ersten Fall ausführbaren Code in den Artikeln und sorgt dafür, dass kein Artikel mehr lesbar ist und massiv Probleme auftreten. Das kann bei vielen Artikeln zu sehr viel Ärger und Nacharbeit führen.
Die Abhängigkeit zum plugin ist groß, sollte man sich gut überlegen. Dies ist nicht notwendig und kann gelöst werden. Parallel wird ein neuer Shortcode eingeführt, auch dieser bleibt in der Datenbank, macht sorgen, wenn es kein Plugin gibt, der dies anfängt.
Auch bei gist gibt es diverse Probleme. So ist der Datenschutz, die Performance ein Thema. Zweites kann man mit Caching lösen. Parallel ist man auch hier abhängig von der Gunst Dritter, die in dem Fall ach Styling etc einbringen.
Das lässt sich aber sehr schnell mit ein paar Zeilen in der functions.php abfangen – sollte mal das Plugin weg sein. Es ist ja nichts anderes als ein langer Shortcode, den man ja sehr einfach selbst definieren kann und zur Not halt
vor undnach den Shortcode ausgeben lässt. ZUDEM führt WordPress schon lange keinen Code innerhalb des Content Bereichs aus! Also ich sehe da jetzt nicht die Schwierigkeit.grr, jetzt hat die Kommentarfunktion die html tags gefressen 🙂
Das sehe ich nicht so.
Zum einen gehört die Logik nicht in Themes, sie ist unabhängig von Design, Darstellung zu halten.
Zum Anderen gehört eine Struktur, in dem Fall in der Datenbank, nicht verändert, sie führt zu Abhängigkeiten und somit Problemen. Bei Sites mit Tausenden von Artikeln ist es Mühsam, teuer dies zu fixen. Ein Abfangen mit eigenem Shortcode-Code ist keine Lösung, er verschlimmert es nur und ist einer der vielen Gründe für Instabilität und schlechte Performance.
Code, den man als Content darstellen will, gehört separiert vom Editor oder maskiert, so dass er unabhängig in der DB liegt.
Ich nutze den SyntaxHighlighter Evolved schon seit Jahren in mehreren Blogs und konnte bisher nichts besseres finden.
Die GIST Variante ist zwar ganz nett, birgt aber auch ein paar Nachteile (Pagespeed, da nachladender Code) und in Deutschland sogar Datenschutzprobleme. Nutzer sollten auf jeden Fall die Datenschutz Seite aktualisieren und GITHub als Tracking Quelle angeben – natürlich mit Opt-Out Möglichkeit.