Da ich demnächst auf einer WordPress Website häufiger über (Quell-)Code und konkrete Beispiele schreiben werde, habe ich mir vorgenommen, diese Code-Beispiele auch gut aussehen zu lassen. Daher habe ich mich gefragt:
Wie kann man Code in WordPress ausgeben? Um Code auf einer WordPress Website ausgeben zu lassen, kann man den Code entweder direkt im Editor eingeben, ihn in Tags wie <pre> oder <code> einschließen, den Code per Plugin oder von externen Quellen einbinden, oder einen Screenshot oder ein anderes Dokument direkt einbinden.
Diese Möglichkeiten haben alle Ihren Zweck und natürlich ihre Vor- und Nachteile. Und all das sehen wir uns im Folgenden genau und mit konkreten Beispielen an. Was ich hier übrigens als Code bezeichne, nennen einige auch Quellcode, das meint hier dasselbe.
Warum funktionieren Code-Beispiele auf einer WordPress-Website nicht einfach so?
Das Problem ist einfach erklärt:
- Auf einer Website gibt es Inhalte, die im Internet-Browser des Besuchers auf eine bestimmte Art dargestellt werden sollen.
- Damit das funktioniert, enthalten die Dateien, die der Webserver an den Besucher schickt, spezielle Befehle. Grob gesagt, gibt es dabei folgende Fälle:
- HTML-Dateien enthalten Inhalts-Text und strukturelle Befehle (Absatz, Kasten, Überschrift, etc.)
- CSS-Dateien enthalten Darstellungs-Anweisungen (Textfarbe, Hintergrund, Schriftgröße, Abstände, etc.)
- JavaScript-Dateien enthalten kleine Programme, um Inhalte oder Design bzw. das Layout der angesehenen Seite im Browser verändern zu können, ohne nochmals mit dem Webserver kommunizieren zu müssen.
- In allen diesen Fällen enthalten die jeweiligen Dateien Befehle, die der Besucher der Website nicht sehen soll, sondern die eben z.B. die Struktur der Seite festlegen.
- Der Browser nutzt daher diese Befehle automatisch, um die angesehene Seite richtig zu strukturieren oder darzustellen.
- Daher ist es nicht ohne weiteres möglich, einen solchen Befehl als Text anzeigen zu lassen, ohne dass er als Hinweis zu Struktur oder Design der Seite interpretiert wird.
Bei einer WordPress-Website gibt es (wie bei anderen Varianten, die Server-Side-Scripting verwenden, um die angesehene Seite zu erstellen), gibt es sogar noch einen Schritt vor dem HTML: Dateien in der Programmiersprache PHP. Diese Dateien werden auf dem Webserver in HTML-Dateien umgewandelt. Dabei ergibt sich also auch eine Schwierigkeit, PHP-Befehle oder Code-Beispiele in PHP vom Webserver „ignorieren“ zu lassen.
Kann man Code-Befehle auf einer Website nicht irgendwie deaktivieren?
Um zu erreichen, dass bei einem Programmablauf bestimmte Befehle oder Zeichen ignoriert und als normaler Text behandelt werden, gibt es sogenannte Escape-Sequenzen von Zeichen. Diese werden meist um den anzuzeigenden Code herum angeordnet und signalisieren, dass alles dazwischen einfach nur als Text anzusehen ist.
Da sich verschiedene Programmiersprachen hier teilweise deutlich unterscheiden, und außerdem nicht klar ist, um welche Zeichen oder Befehle man sich genau beim Anzeigen auf einer Website sorgen machen muss, ist hier eine einfache Lösung gefragt.
Ein beachtenswerter Punkt dabei ist z.B., dass WordPress bestimmte definierbare Befehle, die eckige Klammern eingeschlossen werden, nutzt, sogenannte WordPress-Shortcodes. Das bedeutet, dass man teilweise auch gar nicht weiß, welche Zeichenfolgen zwischen eckigen Klammern als Befehle funktionieren und welche nicht.
Wie sollten Code-Beispiele auf einer Website eigentlich aussehen?
Bevor wir uns den verschiedenen Lösungen dieses Problems zuwenden, sollten wir uns aber auch überlegen, was wir eigentlich von der Darstellung von Code-Beispielen erwarten (außer, dass sie funktioniert).
Arten von Code-Beispielen auf Websites
Wenn man beim Schreiben auf einer Website etwas Quellcode herzeigen möchte, kann es sein, dass es sich nur um einen Befehl oder eine sehr kurze Passage handelt. In diesem Fall zahlt es sich meist nicht aus, dafür eine neue Zeile zu beginnen oder einen extra Text-Block zu erzeugen, sondern man schreibt einfach in der Zeile weiter (inline).
Der andere Fall ist ein ganzer Block von Code mit mehreren Zeilen. Diese Variante ist bei allen etwas komplizierteren oder mehrzeiligen Code-Beispielen zu bevorzugen.
Anforderungen an Code-Beispiele
Als jemand, der Programme schreibt oder sonst mit Code zu tun hat, ist man meist einen bestimmten Editor gewöhnt. Dort sieht der Code gut und übersichtlich aus und man findet sich leicht zurecht. Um das zu erreichen, braucht es folgende Eigenschaften:
- Eine Schriftart mit fixem Abstand der Buchstaben (monospace Font): So stehen Zeichen in verschiedenen Zeilen immer exakt untereinander.
- Einrückungen: Eine bestimmte Anzahl von Leerzeichen oder Tabulatoren am Beginn einer Zeile, die Hierarchien anzeigt oder implementiert.
- Zeilennummern: Stehen vor dem eigentlichen Zeilenanfang und erleichtern das Auffinden und Referenzieren von Code-Teilen.
- Syntax Highlighting: Die in der jeweiligen Programmiersprache verwendeten Befehle und andere typische Features (z.B. Strings oder Kommentare) werden farblich hervorgehoben oder unterdrückt.
Bestimmte Features wie z.B. Einrückungen gibt es nicht zwingend in allen Programmiersprachen. Andere Dinge, wie z.B. Zeilenumbrüche sind je nach Editor und Geschmack optional.
Auf einer Website lassen sich diese Punkte für Code-Beispiele ebenfalls implementieren. Wie, das sehen wir uns im Folgenden genau an, und zwar für den konkreten Fall WordPress.
Was passiert, wenn ich ein Code-Beispiel einfach in den WordPress-Editor einfüge?
Diese Frage ist berechtigt, denn WordPress ist über die vergangenen Jahre immer besser und benutzerfreundlicher geworden, wenn es um die Darstellung verschiedener Inhalte geht. Der letzte Schritt, die Einführung des Block-Editors (auch Gutenberg genannt), ist erst teilweise von den WordPress Webmastern angenommen worden.
Daher beschreibe ich hier sowohl, was im Block-Editor Gutenberg als auch dem Classic Editor zu tun ist. Auch was bei einer direkten Eingabe von Code im Editor passiert, hängt davon ab, welchen man verwendet.
Code in WordPress Gutenberg über den Code-Block ausgeben
Der neue WordPress Editor Gutenberg verwendet Blöcke als zentrales Gestaltungselement. Wenn man einfach einige Zeilen Code in Gutenberg aus der Zwischenablage einfügt, dann kann das Resultat ziemlich ungewollt werden. Der (visuelle) Editor interpretiert dabei zwar fast alles als normalen Text, zerstückelt jedoch den Code in mehrere Blöcke, je nachdem, was er als Absätze interpretiert.
Da ich hier auf WebsiteBerater.com den Block-Editor Gutenberg noch nicht verwende, habe ich diese Variante auf einer anderen Website getestet. Ich habe dabei verschiedene Überschriften und Absätze in seltsam anmutenden Kombinationen erhalten, wobei die Überschriften durch das Python-Kommentarzeichen „#“ erzeugt wurden. Besser ist es daher, zuvor den richtigen Block für Code auszuwählen.
Man klickt auf das Plus an der linken Seite und wählt aus den Block-Arten Code aus. Dann sieht man
und kann den gewünschten Code problemlos hinein kopieren. Das Ergebnis ist ok, weil es einen monospace Font benutzt und außerdem Leerzeichen und Tabulatoren respektiert, hat aber folgende Probleme:
- Es gibt kein Syntax-Highlighting.
- Inhalt der zu breit ist, steht einfach sichtbar an der rechten Seite hinaus, bis er vom Fensterrand abgeschnitten wird.
- Inline-Darstellung ist nicht möglich.
Diese Punkte sind für mich die größten Nachteile des Code-Blocks in WordPress Gutenberg. Für kurze Sequenzen oder einzelne Befehle mag es trotzdem genügen.
Code im Classic Editor von WordPress ausgeben
Die Verwendung des Classic Editors in WordPress liefert eine ähnliche Situation, die jedoch besser mit inline-Code umgeht.
Direkte Eingabe von Code-Beispielen im WordPress Editor
Wenn man z.B. Python-Code direkt im Classic Editor eingibt, ohne nachzudenken, passiert Folgendes:
def maxwellpdf(x,b):
fun = np.sqrt(2./np.pi)*x**2/b**3*np.exp(-x**2/2./b**2)
return fun
Hier kann man erkennen, dass Leerzeichen und Tabulatoren ignoriert werden und die nicht-monospace Schrift, die Sache recht unübersichtlich macht. Das ist also bereits sehr unbefriedigend. Verwendet man noch dazu Befehle, die in HTML eine Bedeutung haben, dann wird es spannend, was der visuelle WordPress Classic-Editor damit macht.
Der Code: <img src=“https://websiteberater.com/wp-content/uploads/2018/05/websiteberater-logo-color-600.png“> wird z.B. genau so dargestellt, weil der visuelle Editor automatisch das „<“ Zeichen bei der Eingabe in die entsprechende HTML-Entität, nämlich „<“ umwandelt, sodass der Text nicht als HTML-Befehl interpretiert wird.
Trotzdem sind dieses Rätselraten und die unbefriedigende Darstellung höchstens als Notlösung zu gebrauchen.
Einschließen von Code-Beispielen in <pre> oder <code> Tags im WordPress Editor
Um Code wenigstens etwas besser und ansprechender Darzustellen, kann man sich der <pre> und <code> Tags in WordPress bedienen. Um <pre> zu verwenden, schreibt man einen Absatz und wählt aus dem Dropdown-Menü der Formate den untersten Punkt Vorformatiert. Das sieht dann so aus:
<img src="https://websiteberater.com/wp-content/uploads/2018/05/websiteberater-logo-color-600.png">
Das sieht schon besser aus. Auch bei mehrzeiligen Code-Beispielen hat man hiermit Erfolg, muss aber, um Einrückungen zu erhalten, das Absatzformat wechseln, bevor man den Code hinein kopiert:
def maxwellpdf(x,b):
fun = np.sqrt(2./np.pi)*x**2/b**3*np.exp(-x**2/2./b**2)
return fun
Mit <code> Tags sieht das so aus:
def maxwellpdf(x,b):
fun = np.sqrt(2./np.pi)*x**2/b**3*np.exp(-x**2/2./b**2)
return fun
Die Einrückungen werden hier also ignoriert. Man muss diese Tags übrigens auch noch in der Text-Variante des Classic Editors einfügen, sodass sich daraus kein echter Vorteil gegenüber <pre> für abgesetzte Code-Blöcke ergibt. Der Vorteil hier liegt inline, wo man wunderbar <pre> schreiben kann.
Trotzdem Vorsicht: Man muss für HTML-Tags immer noch „<“ bzw. „>“ statt < und > im Text-Editor schreiben, sonst wird der Befehl ausgeführt. Zusammenfassend nimmt man also <code> für den inline-Einsatz und <pre> für Absätze, die Code-Beispiele enthalten.
Obwohl diese Variante den Vorteil hat, kein Plugin oder sonstige zusätzliche Ressourcen zu erfordern, ist sie dennoch reichlich umständlich und liefert teilweise unerwünschte Resultate:
- Die Ausgabe ist zu breit und wird nicht umgebrochen oder entsprechend scrollbar gemacht (siehe auch das Beispiel oben)
- Es gibt kein Syntax-Highlighting
- Je nach Tag werden Leerzeichen nicht respektiert
Insgesamt finde ich daher die in WordPress vorhandenen Lösungen zur Darstellung von Code-Beispielen unzureichend, was Darstellung und Benutzerfreundlichkeit betrifft.
Die Verwendung eines WordPress-Plugins zum Ausgeben von Code-Beispielen
Um sich nicht mit den Unannehmlichkeiten von Sonderzeichen, Escape-Zeichen, etc. herumschlagen zu müssen, sondern einfach bequem seinen Quellcode in einen Artikel auf der WordPress Website einfügen und anzeigen zu können, bietet sich die Verwendung eines Plugins an.
Welche Art von WordPress-Plugin brauche ich zum Ausgeben von Code-Beispielen?
Die erste Frage, die sich hier stellt, ist, nach welcher Art von Plugins man eigentlich suchen soll, um etwas Vernünftiges zu finden. Die Antwort liefert das Stichwort Syntax-Highlighting. Sucht man hingegen nach Plugins für z.B. Code Snippets, erhält man hauptsächlich Plugins vorgeschlagen, die dazu dienen PHP-Code-Bestandteile auf der eigenen WordPress-Website (unter der Motorhaube) zum Einsatz zu bringen.
Lustigerweise habe ich solche Plugins in manchen Review-Artikeln auch als Empfehlungen für das Ausgeben Code-Beispielen gefunden. Das zeugt nicht gerade von guter Vorbereitung, sondern eher davon, dass man Inhalte von woanders blind übernommen hat. Aber genug davon und zurück zum Thema!
Vorsicht bei veralteten WordPress-Plugins!
Im Bereich Syntax-Highlighting gibt es einige Plugins, doch ist bei der Auswahl (wie immer bei der Auswahl eines WordPress Plugins) Vorsicht geboten. In einem anderen Artikel habe ich bereits beschreiben, wie man nach geeigneten WordPress Plugins sucht und das richtige auswählt. Unter anderem sollte man sich ansehen, wann ein interessant aussehendes Plugin zuletzt aktualisiert wurde.
Bei meinen Recherchen zum Thema Syntax-Highlighting Plugins habe ich viele Empfehlungen gefunden, die offenbar bereits zum Zeitpunkt, als die jeweilige Empfehlung geschrieben wurde, nicht mehr ganz aktuell waren. Das beste Beispiel dafür ist das populäre Plugin Crayon Syntax Highlighter, das seit (stand Herbst 2021) über sechs Jahren nicht mehr aktualisiert wurde. So schön es auch aussehen mag, davon würde ich persönlich die Finger lassen (schon allein aus Gründen der Sicherheit meiner Website).
Um sich selbst ein Bild zu machen, sucht man einfach bei der Plugin Installation im WordPress Dashboard nach dem Stichwort Syntax Highlight. Es gibt dort einige interessante Kandidaten.
Code-Beispiele in WordPress mit dem Plugin Enlighter – Customizable Syntax Highlighter
Auf diese Art bin ich auf das WordPress Plugin Enlighter – Customizable Syntax Highlighter gestoßen. In einem anderen Artikel habe ich bereits im Detail die Installation und Einstellungen des Enlighter WordPress Plugins beschrieben. Hier geht es nun um die Anwendung.
Zur Diskussion in jenem anderen Artikel gehört übrigens auch eine Übersicht über alle Themes des WordPress-Plugins Enlighter im unmittelbaren Vergleich. Anhand dieses Vergleichs habe ich mich für das Enlighter-Theme Classic hier auf WebsiteBerater.com entschieden, da es frisch ist und recht gut zum Gesamt-Design der Website passt. Das sieht dann z.B. so aus:
import numpy as np
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2) * np.exp(-(x-m)**2/(2*s**2))
return fun
Hier sieht man bereits, dass die wesentlichen Features vorhanden sind: Die Formatierung sieht gut aus und das Syntax-Highlighting ebenfalls (und lässt sich wie gesagt anpassen). An einem etwas längeren Code-Beispiel in Python zeige ich hier noch ein anderes Plugin-Theme (Godzilla). Außerdem sind in diesem Beispiel die Code-Zeilen 18-20 hervorgehoben, und die erste Code-Zeile ist auf die Nummer 9 eingestellt. Die Zeile, über der sich der Mauszeiger gerade befindet, wird zusätzlich noch leicht hervorgehoben.
import numpy as np
#import math
import matplotlib.pyplot as plt
#plt.switch_backend('agg')
import datetime
#from pandas_datareader import data
from scipy.stats import norm,skew,kurtosis,mode,maxwell
def maxwellpdf(x,b):
fun = np.sqrt(2./np.pi)*x**2/b**3*np.exp(-x**2/2./b**2)
return fun
def gaussianpdf(x,m,s):
fun = 1/np.sqrt(2.*np.pi*s**2)*np.exp(-(x-m)**2/2./s**2)
return fun
def circle(x,r):
fun = np.sqrt(r**2-x**2)
return fun
samplesize = 10000
numberofsamples = 20
Code-Beispiele in WordPress Gutenberg mit dem Enlighter-Plugin einfügen
Um ein Code-Beispiel mit dem Enlighter-Plugin in WordPress Gutenberg einzufügen, verwendet man einfach den dazu vom Plugin bereitgestellten Block mit der Bezeichnung Enlighter Sourcecode. Nach der Auswahl dieses Blocks und dem hinein Kopieren des Code-Beispiels kann man für den Block noch im Seitenmenü rechts entsprechende Einstellungen setzen.
Code-Beispiele im WordPress Classic Editor mit dem Enlighter-Plugin einfügen
Um im Classic Editor ein Code-Beispiel einzufügen, hat man nach der Installation des Enlighter-Plugins in der Werkzeugleiste über dem Editor-Fenster folgenden Button zur Verfügung, der die Umgebung für Enlighter-Code einfügt:
Durch einen Klick öffnet sich folgende Eingabe:
Hier kann man die (Programmier-)Sprache einstellen und zwischen Block und inline-Modus wählen. In das blau umrandete Feld gibt man den Code ein. Nach der Bestätigung mit OK erscheint an der gewählten Stelle im Text folgendes Element:
Dort lässt sich dann mit einem Klick zunächst auf den Block und dann auf das kleine Symbol ganz rechts auf dem Block ein weiteres Einstellungsfenster öffnen, wo man schließlich auch das Theme vom Default weg verändern kann und einige andere Dinge einstellen kann, wie z.B. die Hervorhebung einzelner oder mehrerer Zeilen im Code, etc.:
So kann man einige Einstellungen, darunter auch das verwendete Plugin-Theme, für jeden Code-Block individuell anpassen.
Ein Code-Beispiel auf einer WordPress-Website als Screenshot oder über eine andere Datei ausgeben
Im Prinzip kann man Code natürlich auch als Datei in den Text auf einer WordPress Website einbinden. Das einfachste Beispiel für eine Datei ist ein Bild, aber diese Variante funktioniert natürlich auch mit anderen Formaten.
Code-Beispiele als Screenshots in WordPress anzeigen
Eine einfache Variante ist, einfach einen Screenshot des Codes in jenem Editor zu machen, den man zum Programmieren verwendet. Für mein Python-Beispiel habe ich den entsprechenden Screenshot im Code-Fenster von Spyder, den ich als Teil der Anaconda-Distribution verwende. Hier ist er:
Eine Eigenschaft dieser Variante, die sowohl Nachteil als auch Vorteil sein kann, ist, dass man hier den Code nicht einfach als Text kopieren kann. Das bietet sich also an, wenn man es dem Publikum erschweren möchte, das Beispiel zu kopieren ohne es abzutippen.
Andererseits kann es sein, dass man eigentlich gerne möchte, dass sich die Besucher der Website den Code kopieren können. Dann darf man von solchen Code-Beispielen keine Screenshots verwenden. In einem anderen Artikel habe ich übrigens ganz im Detail beschrieben, wie man in WordPress mit Bildern arbeitet.
Code-Beispiele als pdf oder andere Datei in WordPress einbinden
Bei anderen Dateiformaten und -typen wie z.B. pdf kann es sein, dass man auf ein Plugin für das direkte Anzeigen dieses Dokumenttyps im Text auf der WordPress Website zurückgreifen muss, wie z.B. das WordPress Plugin PDF Embedder. Da es hier verschiedenste Varianten und Möglichkeiten gibt, möchte ich das aber nicht im Detail diskutieren.
Code-Beispiele in WordPress von externen Quellen einbinden und anzeigen lassen
Eine weitere sehr praktische Methode ist, die Code-Beispiele, die man gerne anzeigen möchte, gar nicht direkt auf der eigenen Website aufzuschreiben (oder hinein zu kopieren), sondern sie von einer externen Quelle einzubinden.
Ein bekanntes Beispiel für ein externes sogenanntes Code-Repository ist GitHub, wo man bereits mit einem kostenlosen Account seine Code-Sammlungen hosten kann. Diese Möglichkeit ist für viele Programmierer Alltag. Damit man ganz einfach auf solche Code-Beispiele verweisen kann, können Programmierer sogenannte Gists kreieren, die dann mit einem kurzen Skript auf einer Website angezeigt werden können.
Man findet diese Gists auf gist.github.com. Dort kann man die Suchfunktion verwenden, um etwas Interessantes zu finden. Nach einem Klick auf das entsprechende Beispiel in der Liste kommt man zu dessen Seite, wo man den Embed-Link oben rechts kopieren kann.
Als Beispiel habe ich nach „tensorflow“ gesucht und aus der Liste der Resultate eines ausgewählt. Der Embed-Code ist:
<script src="https://gist.github.com/jthomas/145610bdeda2638d94fab9a397eb1f1d.js"></script>
Durch Einbetten erhält man:
Code-Beispiele auf der WordPressWebsite anzeigen: Mein Fazit
Von all diesen Varianten finde ich persönlich (für nicht auf GitHub gehostete Code-Beispiele) die Nutzung eines Plugins am besten. Das gilt sowohl aus der Sicht der Benutzerfreundlichkeit als auch aus der Sicht einer idealen Präsentation des Code-Beispiels.
Das Hosten des Codes auf GitHub hat den Vorteil, dass man auf der eigenen Website nur eine Zeile Skript-Code einbinden muss und keine Website-Ressourcen (mehr Plugins brauchen immer mehr Ressourcen) dafür benötigt. Diese Variante ist somit sicher die eleganteste und effizienteste. Der einzige Nachteil hier ist die nicht so direkte Möglichkeit, as Aussehen der Embeds zu beeinflussen.
Doch auch dieses Problem kann man lösen, allerdings nur durch Verändern der CSS-Stylesheets der Gists. Passender Weise gibt es dazu ein Projekt auf GitHub, das mehrere vorbereitete CSS-Stylesheets für Gists anbietet. Wer also an dieser Variante interessiert ist, kann hier etwas Passendes finden (und sich auch selbst an der Weiterentwicklung beteiligen).
Was man in WordPress übrigens sonst noch an Plugins braucht und welche WordPress-Plugins ich zusätzlich noch empfehle, das sollten Sie sich auch auf jeden Fall ansehen!
Ihr Feedback zu diesem Artikel
Hier eine kleine Umfrage in eigener Sache. Wie fanden Sie die Informationen in diesem Artikel? Die Teilnahme an dieser Umfrage ist natürlich freiwillig und völlig anonym. Mit Ihrer Teilnahme stimmen Sie unserer Datenschutzerklärung zu. Vielen Dank!
Weitere Informationen zu WordPress Websites
Schreiben Sie schon länger an Ihrer WordPress Website? Oder planen Sie diese erst? Egal, wo Sie stehen, mein kompletter Leitfaden zur Erstellung einer WordPress Website hält sicher die eine oder andere Überraschung und wertvolle Tipps für Sie parat (unbedingt reinschauen!).
