Syntax-Highlighting und “Copy Code”-Funktionalität mit Highlight.js und JavaScript in WordPress integrieren

In diesem Beitrag zeigen wir, wie du Syntax-Highlighting auf deinem WordPress-Blog mit Highlight.js einbindest und zusätzlich eine praktische “Copy Code”-Schaltfläche hinzufügst, um den Code aus einem Beitrag leicht kopieren zu können.

1. Highlight.js und CSS für Syntax-Highlighting einbinden

// Highlight.js und CSS für Syntax-Highlighting einbinden
function enqueue_highlight_js() {
    if (is_single()) { // Nur auf Einzelposts ausführen
        // Highlight.js JavaScript-Datei einbinden
        wp_enqueue_script('highlight-js', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js', array(), null, true);
        
        // Highlight.js CSS-Datei für den Stil des Codes einbinden
        wp_enqueue_style('highlight-css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_highlight_js');

Dieses Snippet lädt die Highlight.js-Bibliothek sowie das dazugehörige Standard-CSS für das Syntax-Highlighting auf Einzelbeiträgen (Posts) ein. Dies stellt sicher, dass der Code auf deiner Seite korrekt und in einem lesbaren Format dargestellt wird.

2. Highlight.js initialisieren

// Highlight.js initialisieren
function activate_highlight_js() {
    if (is_single()) { // Nur auf Einzelposts ausführen
        echo '';
    }
}
add_action('wp_footer', 'activate_highlight_js');

Diese Funktion sorgt dafür, dass Highlight.js nach dem Laden der Seite aktiviert wird. Hier wird ein JavaScript-Snippet in den Footer eingefügt, das alle Codeblöcke auf der Seite automatisch hervorhebt.

3. “Copy Code”-Schaltfläche hinzufügen

// "Copy Code"-Schaltfläche für Codeblöcke hinzufügen
function enqueue_copy_code_script() {
    // Eigenes JavaScript für die "Copy"-Schaltfläche einbinden
    wp_enqueue_script('copy-code-js', get_stylesheet_directory_uri() . '/js/copy-code.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_copy_code_script');

Hier wird ein JavaScript-Skript eingebunden, das die “Copy Code”-Schaltfläche anzeigt. Diese Schaltfläche erscheint bei jedem Codeblock und ermöglicht den Nutzern, den Code mit nur einem Klick in die Zwischenablage zu kopieren.

4. JavaScript für die “Copy Code”-Schaltfläche

document.addEventListener('DOMContentLoaded', function() {
    const codeBlocks = document.querySelectorAll('pre code');

    codeBlocks.forEach(block => {
        // "Copy"-Button erstellen
        const copyButton = document.createElement('button');
        copyButton.className = 'copy-button';
        copyButton.innerHTML = ' Copy'; // Clipboard Icon hinzufügen

        // Button in den Codeblock integrieren
        const container = document.createElement('div');
        container.className = 'code-container';
        block.parentNode.insertBefore(container, block);
        container.appendChild(block);
        container.appendChild(copyButton);

        // Event-Listener für den "Copy"-Button
        copyButton.addEventListener('click', function() {
            const code = block.innerText;

            // Code in die Zwischenablage kopieren
            navigator.clipboard.writeText(code).then(function() {
                // Schaltfläche in "Copied" ändern
                copyButton.innerHTML = '✔ Copied!';
                setTimeout(() => {
                    copyButton.innerHTML = ' Copy';
                }, 2000);
            }, function() {
                console.error('Failed to copy text');
            });
        });
    });
});

Dieses JavaScript fügt die “Copy”-Schaltfläche zu jedem Codeblock auf der Seite hinzu. Wenn der Button angeklickt wird, wird der Code in die Zwischenablage kopiert und der Button zeigt vorübergehend “Copied” an.

5. Testen im Frontend

1. Erstelle einen Beitrag in WordPress
2. Füge HTML-Code in den Beitrag ein indem du auf das das Plus-Symbol (+) ancklickst und das Element Custom HTML auswählst
3. Füge den Code in den Code-Block ein, je nach verwendeter Programmiersprache.

Zum Beispiel, wenn du JavaScript verwendest, füge folgenden Code in den Code-Block ein:

<pre><code class="language-javascript">
// Beispiel JavaScript-Code
function greet() {
    console.log("Hallo Welt!");
}
greet();
</code></pre>

Fazit

Mit diesen Schritten hast du eine elegante Möglichkeit, Syntax-Highlighting und eine “Copy Code”-Funktion auf deiner WordPress-Seite zu implementieren. Besonders in technischen Blogs oder bei Tutorials ist dies eine nützliche Ergänzung für deine Leser.