Zwei frische Lösungen für die Code-Darstellung in WordPress

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.

Zwei frische Lösungen für die Code-Darstellung in WordPress

Code-Darstellung Nr. 1: Das SyntaxHighlighter Evolved Plugin

SyntaxHighlighter-Evolved

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.

SyntaxHighlighter-Evolved-Beispiel

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:

Beispiel 1 - PHP

PHP Darstellung

CSS:

Beispiel 2: CSS

CSS Darstellung

Ein Auszug aus den vielfältigen Einstellungen des Plugins:

SyntaxHighlighter-Einstellungen

  • 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

GitHub Gist

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

oEmbedGist

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-zum-gist-kopieren

Link in den visuellen WordPress-Editor einfügen

Den Link zum Gist in den Editor einfügen

Das Endergebnis auf der Website

Die Darstellung 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

(dpe)

ist freier Journalist, WordPress-Entwickler und Spezialist für WordPress-Sicherheit. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog TechBrain.de schreibt er über das Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Viktor Dite
Gast

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.

Frank
Gast
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… Read more »
Viktor Dite
Gast

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 und nach 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.

Viktor Dite
Gast

grr, jetzt hat die Kommentarfunktion die html tags gefressen :)

Frank
Gast

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.

trackback

[…] Drweb.de: Zwei frische Lösungen für die Code-Darstellung in WordPress […]

wpDiscuz