Zum Inhalt springen
> 💻 🧠 Code 1001 > Code-Highlighting in WordPress mit Gutenberg und Prism.js

Code-Highlighting in WordPress mit Gutenberg und Prism.js

  • von

Wenn Sie Inhalte in WordPress erstellen, verwenden Sie meist den Gutenberg-Editor.
Er wurde mit WordPress 5.0 (Dezember 2018) eingeführt und hat den alten Texteditor TinyMCE ersetzt.

TinyMCE war ein einfacher Editor aus der Web-1.0-Ära – ein <textarea>-Feld mit Schaltflächen wie „Fett“, „Kursiv“ und „Link“.
Der gesamte Text wurde als durchgehender HTML-Strom gespeichert, was es schwierig machte, Absätze zu verschieben oder etwas dazwischen einzufügen.
Außerdem unterstützte TinyMCE kein responsives 12-Spalten-Layout, das in der Web-2.0-Ära zum De-facto-Standard wurde.
Komplexe Layouts mussten daher manuell mit HTML und CSS erstellt werden.

Gutenberg – ein Editor der neuen Generation

Der Gutenberg-Editor hat dieses Problem gelöst.
Jeder Teil einer Seite existiert jetzt als Block – Überschrift, Absatz, Zitat, Bild, Tabelle oder Code-Block –
was die Bearbeitung vereinfacht und das Layout flexibel und anpassbar macht.

Inhalte sollten auf allen Geräten gut aussehen – vom Smartphone bis zum großen Monitor.
Wenn eine Website nicht responsiv ist, verrutscht der Text, Bilder werden abgeschnitten und Tabellen laufen über den Rand.
Dies wird durch ein responsives Layout gelöst, das sich automatisch an die Bildschirmbreite anpasst.

Die Grundlage dieses Layouts ist ein 12-Spalten-Raster, bekannt durch Frameworks wie Bootstrap und Foundation.
Die Breite des Containers wird in 12 gleich große Teile (je 8,33 %) unterteilt, womit sich nahezu jedes Layout bauen lässt.

Beispiel:

1 Spalte  → [████████████] 100 %
2 Spalten → [██████][██████] 6/6
3 Spalten → [████][████][████] 4/4/4
4 Spalten → [███][███][███][███] 3/3/3/3

Auf Mobilgeräten werden die Spalten automatisch vertikal angeordnet,
sodass der Inhalt übersichtlich und lesbar bleibt.

Wie Gutenberg das Raster umsetzt

In Gutenberg wird das 12-Spalten-Raster mit dem Spalten-Block (Columns) realisiert,
der die Elemente automatisch an die Bildschirmbreite anpasst.
In HTML werden Container mit den Klassen wp-block-columns und wp-block-column verwendet,
und in CSS sorgt Flexbox für Ausrichtung und Verhalten der Spalten.

Beispiel:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Erste Spalte</p>
  </div>
  <div class="wp-block-column">
    <p>Zweite Spalte</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Diese Struktur macht Gutenberg flexibel und sorgt für konsistente Darstellung auf allen Geräten.

Das Problem des Standard-Codeblocks

Unter den vielen Gutenberg-Blöcken verdient der Code-Block besondere Aufmerksamkeit.
Er dient zur Anzeige von Programmcodes, Skripten oder Konfigurationen.
Technisch gesehen ist es ein einfacher HTML-Container:

<pre> ... </pre>

Gutenberg und TinyMCE zeigen ihn gleich an – als monospace-Text
(meist mit den Schriftarten Consolas, Courier New oder Monaco)
ohne Syntax-Highlighting oder Zeilennummern.

Für einfache Texte reicht das, aber bei technischen Artikeln oder Tutorials
ist Code ohne Farbe schwer lesbar.
Die einfachste Lösung ist Prism.js.

Was ist Prism.js?

Prism.js ist eine leichte JavaScript-Bibliothek für Syntax-Highlighting direkt im Browser.
Sie benötigt keinen Server-Support – das Skript analysiert den Inhalt zwischen <pre><code>...,
und die CSS-Datei prism.css färbt Schlüsselwörter, Zeichenketten, Zahlen und Kommentare ein.

Prism unterstützt Dutzende Programmiersprachen – von HTML und JavaScript bis Python und Go –
und bietet viele Plugins: Zeilennummern, Kopierschaltfläche, Sprachlabel, helle/dunkle Themen und mehr.

Beispiel:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

Nach dem Einbinden von Prism.js wird dieser Code automatisch im Browser hervorgehoben.

Arbeiten mit einem Child-Theme

Bevor Sie Prism.js hinzufügen, sollten Sie den Haupt-Theme-Code nicht direkt ändern.
Alle Anpassungen in WordPress sollten in einem Child-Theme erfolgen.

Ein WordPress-Theme steuert das Aussehen der Website – Vorlagen, Stile, Menüs, Header und Footer.
Wenn Sie den aktiven Theme ändern, werden Ihre Änderungen beim nächsten Update überschrieben.

Ein Child-Theme löst dieses Problem: Es erbt das Eltern-Theme,
behält Ihre Anpassungen aber separat bei und schützt sie vor Updates.

Erstellen Sie einen Ordner:

/wp-content/themes/mein-child-theme/

Erstellen Sie darin eine Datei style.css:

/*
 Theme Name:   Mein Child-Theme
 Template:     mein-theme
 Version:      1.0
*/

Das Feld Template muss dem Ordnernamen des Eltern-Themes entsprechen.
Dann erstellen Sie functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Aktivieren Sie das Child-Theme unter Design → Themes
und führen Sie alle Anpassungen dort aus.

Verwendung der Website Prism.js

Wenn Ihr Child-Theme bereit ist, besuchen Sie die offizielle Prism.js-Website:
👉 https://prismjs.com

Öffnen Sie den Reiter Download, um Ihre eigene Version der Bibliothek zusammenzustellen.

Empfohlene Einstellungen

  1. Compression level: Minified
  2. Languages: HTML, CSS, JavaScript, PHP, Python, JSON
  3. Plugins:
    • Line Numbers
    • Toolbar
    • Copy to Clipboard Button
    • (optional) Show Language
    • (optional) Highlight Lines

Laden Sie anschließend herunter:

  • DOWNLOAD JS → prism.js
  • DOWNLOAD CSS → prism.css

Speichern Sie beide Dateien im Ordner Ihres Child-Themes:

/wp-content/themes/mein-child-theme/

Prism.js in WordPress einbinden

Öffnen Sie functions.php und fügen Sie Folgendes hinzu:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

Prism.js hebt nun automatisch jeden Code innerhalb von
<pre><code>... hervor.

Automatische Zeilennummerierung

Fügen Sie einen WordPress-Filter hinzu, um Zeilennummern automatisch einzufügen:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

HTML-Zeichen escapen

Wenn Ihr Code < oder > enthält, kann der Browser diese als HTML-Tags interpretieren.
Um dies zu verhindern, fügen Sie einen Filter hinzu, der diese Zeichen beim Speichern automatisch ersetzt:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

CSS-Stile für Codeblöcke

Fügen Sie diese Stile in die style.css Ihres Child-Themes ein:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Zusätzliche Funktionen von Prism.js

  • 🔢 Zeilennummern – fügt Nummern wie in einem IDE hinzu.
  • 🧠 Hervorhebung bestimmter Zeilen – mit data-line="2,4-5".
  • 📋 Kopier-Button – kopiert Code mit einem Klick.
  • 💡 Sprachlabel – zeigt den Namen der Sprache über dem Block an.
  • 🌗 Hell-/Dunkel-Thema – automatischer Wechsel:
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Anpassung – ändern Sie Farben direkt in style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

Vorher und nachher mit Prism.js

Vorher

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

Ergebnis:

function greet(name) {
  return `Hello, ${name}`;
}

Monospace-Text, ohne Farbe und Zeilennummern.

Nachher

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}

Ergebnis:

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Jede Zeile ist nummeriert, der Code farbig hervorgehoben,
und ein Copy-Button erscheint zum schnellen Kopieren.

Prism.js macht Codeblöcke klarer und besser lesbar.
Es funktioniert vollständig im Browser, ohne zusätzliche Plugins,
und beeinträchtigt die Performance nicht.
Einmal eingerichtet, erscheint Ihr Code sauber, strukturiert und professionell.

Schreibe einen Kommentar

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