Der standardmäßige „Code“-Block in Gutenberg unterstützt keine Syntaxhervorhebung. Die Bibliothek Prism.js löst dieses Problem. Diese Anleitung beschreibt, wie Sie Prism.js einrichten, einschließlich einer automatischen Lösung für Anzeigeprobleme mit den HTML-Zeichen < und >.

Das Problem: Konflikt mit HTML-Tags

Ein Browser interpretiert die Zeichen < und > innerhalb von Codeblöcken als HTML-Tags, was das Seitenlayout zerstört.

Die Lösung: Zeichen-Escaping

Für eine korrekte Darstellung müssen Sonderzeichen durch HTML-Entitäten ersetzt werden:

• < wird durch < ersetzt
• > wird durch > ersetzt

Dieser Prozess wird mit einem WordPress-Filter automatisiert, um manuelle Ersetzungen und Probleme mit dem Gutenberg-Editor zu vermeiden.

Schritt-für-Schritt-Anleitung

Schritt 0: Ein Child-Theme vorbereiten

Alle Änderungen müssen in einem Child-Theme vorgenommen werden, um sicherzustellen, dass sie bei einer Aktualisierung des Eltern-Themes nicht gelöscht werden.

---

Schritt 1: Eine Prism.js-Version herunterladen und konfigurieren

1. Gehen Sie zur Website: prismjs.com/download.html.
2. Wählen Sie die Komponenten aus:
   • Komprimierungsstufe (Compression level): Minified.
   • Sprachen (Languages): Markup, CSS, C-like, JavaScript. Fügen Sie alle anderen erforderlichen Sprachen hinzu.
   • Plugins: Line Numbers, Toolbar, Copy to Clipboard Button.
3. Laden Sie die Dateien herunter: Klicken Sie auf DOWNLOAD JS und DOWNLOAD CSS.

Platzieren Sie die heruntergeladenen Dateien prism.js und prism.css im Hauptverzeichnis Ihres Child-Themes.

---

Schritt 2: Dateien in functions.php einbinden

Um die Dateien in WordPress einzubinden, öffnen Sie die functions.php-Datei Ihres Child-Themes und fügen Sie den folgenden Code hinzu:

<?php

/**
 * Bindet Stile und Skripte für die Code-Hervorhebung ein.
 */
add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    // Prism-Stile einbinden
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/prism.css',
        array(),
        '1.29.0' // Version zur Cache-Kontrolle
    );

    // Prism-Skript einbinden
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/prism.js',
        array(),
        '1.29.0',
        true // Im Footer laden
    );
}

/**
 * Fügt Gutenberg-Codeblöcken automatisch Klassen hinzu.
 */
add_filter('render_block_core/code', 'theme_add_prism_classes_to_code_block', 10, 2);
function theme_add_prism_classes_to_code_block($block_content, $block) {
    // Fügt die Klasse line-numbers zum <pre>-Tag hinzu
    $block_content = str_replace('<pre class="wp-block-code">', '<pre class="wp-block-code line-numbers">', $block_content);
    return $block_content;
}

Dieser Code bindet die Dateien ein und aktiviert die Zeilennummerierung.

---

Schritt 3: Automatisches Escaping von Zeichen

Der entscheidende Schritt ist das Hinzufügen eines Filters in functions.php, um Sonderzeichen vor dem Speichern des Beitrags automatisch zu escapen.

/**
 * Escaped HTML-Zeichen innerhalb von <code>-Tags beim Speichern eines Beitrags.
 */
add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    // Findet alle <code>...-Blöcke
    return preg_replace_callback('/(.*?)<\/code>/is', function($matches) {
        $attributes = $matches[1]; // Tag-Attribute
        $code_content = $matches[2]; // Tag-Inhalt

        // Den Inhalt escapen
        $escaped_content = htmlspecialchars($code_content, ENT_NOQUOTES, 'UTF-8');

        // Das Tag wieder zusammensetzen
        return '<code' . $attributes . '>' . $escaped_content . '';
    }, $content);
}

Der content_save_pre-Hook wird vor dem Schreiben in die Datenbank ausgelöst. Die htmlspecialchars-Funktion wandelt Sonderzeichen in sichere HTML-Entitäten um.

---

Schritt 4: Styling in style.css

Fügen Sie für eine saubere Darstellung die folgenden Stile zur style.css-Datei Ihres Child-Themes hinzu:

/* Stile für Codeblöcke */
pre[class*="language-"] {
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Stile für die Prism-Toolbar */
div.code-toolbar {
    position: relative;
}

div.code-toolbar > .toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1; /* Schaltfläche beim Hovern anzeigen */
}

.toolbar-item button {
    padding: 5px 10px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
}

.toolbar-item button:hover {
    background-color: #e0e0e0;
}

Ergebnis

Nach Abschluss dieser Schritte wird jeder Codeblock in Gutenberg Folgendes haben:

• Automatische Syntaxhervorhebung.
• Zeilennummern.
• Eine Schaltfläche zum Kopieren.
• Korrekte Darstellung von HTML-Tags, ohne das Layout zu zerstören.