Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » WordPress » Zwei frische Lösungen für die Code-Darstellung in WordPress

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 5 Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 4. Januar 2016

Inhaltsverzeichnis

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

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

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

4eck Media Webdesign Agentur Wahren an der Müritz.

4eck Media GmbH & Co. KG

Waren (Müritz)

pictibe Media Consulting & Solution in Köln.

pictibe – Werbeagentur & Marketingagentur

Bergisch Gladbach

Logo der Berliner Webdesign Agentur Primaline. Zu sehen ist ein grünes Schutzschild mit Stern oben links.

PRIMA LINE

Berlin

Timo Specht Profilbild SEo-Agentur München.

Timo Specht – SEO Freelancer München & Online Marketing Experte

München

Ads Masters Erkelenz Amazon SEO Agentur.

AdsMasters GmbH

Düsseldorf

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

5 Antworten zu „Zwei frische Lösungen für die Code-Darstellung in WordPress“
— was ist Deine Meinung?

  1. Frank sagt:
    4. Januar 2016 um 19:43 Uhr

    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.

    Antworten
    1. Viktor Dite sagt:
      11. Januar 2016 um 21:20 Uhr

      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.

      Antworten
      1. Viktor Dite sagt:
        11. Januar 2016 um 21:21 Uhr

        grr, jetzt hat die Kommentarfunktion die html tags gefressen 🙂

      2. Frank sagt:
        12. Januar 2016 um 14:35 Uhr

        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. Viktor Dite sagt:
    4. Januar 2016 um 17:23 Uhr

    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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑