Display code snippets in WordPress

• Language: German (Deutsch) ↓↓
• Title: [de] Code-Schnipsel in WordPress einfügen
• Summary: In this tutorial i'll introduce you to three ways of inserting code snippets in WordPress.

---

Worum geht es?

In diesem Tutorial werde ich dir drei Möglichkeiten vorstellen, wie man in WordPress Code-Beispiele einbinden kann.

---

Code-Schnipsel in WordPress einfügen

Auch bei der Einbindung von Code- bzw. Quelltext-Beispielen führen bei WordPress (WP) viele Wege zum Ziel. Man kann die Code-Beispiele händisch einpflegen, ein Plugin oder sogar einen Webdienst einsetzen. Schauen wir uns die Möglichkeiten und deren Vor- und Nachteile mal genauer an.

Die einfache Lösung

Die einfachste Lösung um Code-Schnipsel in einem WordPress-Beitrag einzubinden besteht darin, dass man den Code einfach wie jeden normalen Text in den Editor einfügt. Allerdings muss man hierbei einiges beachten.

Zuerst muss man diverse "Sonderzeichen" maskieren. In HTML wären das üblicherweise die Tags und das &-Zeichen. Aber keine Sorge, man muss nicht jedes einzelne Sonderzeichen maskieren. Dafür gibt es diverse Online-Tools, die einem hilfreich zur Seite stehen: z. B. das hier und das hier.

Zum anderen ist es sinnvoll, die einzeiligen Beispiele mit <code>...</code> auszuzeichnen. Die mehrzeiligen Beispiele sollte man noch zusätzlich mit <pre><code>...</code></pre> umgeben, damit auch die Einrückungen deutlich werden. Im folgenden sieht man die Abbildung eines einfachen Code-Beispiels, "händisch" eingefügt und ohne Syntax-Hervorhebung:

[Ein einfaches, manuell eingefügter Code-Schnipsel]

Doch das ist nicht alles. Veröffentlicht man auch WordPress-relevante Code-Beispiele, dann muss man auch die eckigen Klammern, [ und ], entschärfen/maskieren, wenn man die Namen der Shorttags im Code-Beispiel hat, wie z.B. [gallery], da sonst logischerweise die Funktion, die sich hinter dem Shorttag verbirgt nicht angezeigt ausgeführt wird.

Weitere Infos zu den eckigen Klammern in WordPress und wie man sie "entschärft" habe ich im folgenden Artikel beschrieben.

Noch einmal kurz zusammengefasst:

• Vorteile: Unabhängigkeit von den Plugins und den Diensten, keine Performance-Einbußen.
• Nachteile: keine Syntaxhervorhebung, keine automatische Zeilennummerierung, man muss diverse Zeichen maskieren (z.B. < zu <).

Einsatz eines WordPress-Plugins

Für WP existiert eine größere Anzahl von Plugins, die die Arbeit mit den Code-Schnipseln etwas einfacher machen und auch für die Besucher ein paar Vorteile mitbringen.

Zum einen braucht man die Sonderzeichen nicht mehr zu maskieren und zum anderen besitzt dann der angezeigte Code eine Syntaxhervorhebung, es gibt es automatische Zeilennummerierung, man kann eine bestimmte Stelle im Code hervorheben und die Besucher können sich das Beispiel bei einigen Erweiterungen auch herunterladen: praktisch bei etwas längeren Code-Beispielen.

[Syntaxhervorhebung in WordPress]

In der oberen Abbildung sieht man ein Code-Fragment, wenn man das Plugin SyntaxHighlighter Evolved aktiv hat. Schon alleine an Hand des oberen Screenshots kann man gut erkennen, dass die Verschönerung am Code durch zusätzliche Größe der Seite (zusätzliches HTML, CSS und ggfl. Javascript) bezahlt wird.

Noch einmal kurz zusammengefasst:

• Vorteile: die Syntaxhervorhebung, die automatische Zeilennummerierung, die üblichen Sonderzeichen müssen nicht "entschärft" werden, Besucher kann die Code-Schnipsel herunterladen.
• Nachteile: die Abhängigkeit von einem WP-Plugin, es werden auf der Website zusätzliche Ressourcen (CSS, Javascript) ausgegeben: es kann unter Umständen spürbare Einbußen in der Performance geben. Man muss auch weiterhin die Shorttags (z.B. [gallery]) maskieren.

Einsatz eines Dienstes: GitHub Gists und CodePen

Viele Webentwickler sind auf entsprechenden Plattformen wie GitHub oder CodePen aktiv, wo sie unter anderem ihre Code-Beispiele pflegen. Daher bietet es sich an, die dort schon eingepflegten Code-Schnipsel auch in entsprechenden Beiträgen einfach einzubetten anstatt sie noch einmal mühsam einzugeben.

Installiert man ein WP-Plugin wie zum Beispiel oEmbed Gist oder erweitert man die functions.php des Themes um den folgenden Code, dann braucht man nur die URL des entsprechenden Code-Schnipsels von GitHub Gist im Beitrag einzufügen und WordPress kümmert sich um den Rest, also um die komplette Ausgabe:

[Gist von GitHub in WordPress einbetten]

Im oberen Screenshot sieht man dann die Ausgabe im Frontend, wenn man das entsprechende GitHub Gist einfügt.

Für die Nutzer von CodePen gibt es ein offizielles WordPress-Plugin, mit welchem man die Code-Beispiele in WordPress einbetten kann.

Noch einmal kurz zusammengefasst:

• Vorteile: die Syntaxhervorhebung, die automatische Zeilennummerierung, die üblichen Sonderzeichen müssen nicht maskiert werden, der Besucher genießt die Vorteile des Dienstes.
• Nachteile: die Abhängigkeit von einem Dienst, es werden auf der Website zusätzliche Ressourcen (CSS, Javascript) ausgegeben: es kann unter Umständen. spürbare Einbußen in der Performance geben.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---