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)