Andreas Hecht 4. Januar 2016

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

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

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance...

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)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

6 Kommentare

  1. 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 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.

      • 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.

  2. 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.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück