<script>
document.addEventListener('DOMContentLoaded', function () {
    // Alle Code-Blöcke im Beitrag finden
    var codeBlocks = document.querySelectorAll('.wp-block-code');

    codeBlocks.forEach(function (block) {
        var code = block.querySelector('code');
        if (!code) return; // Überspringen, falls kein <code> im Block ist

        // Button erstellen
        var button = document.createElement('button');
        button.textContent = 'Copy Code';
        button.style.cssText = `
            position: absolute; 
            top: 0; 
            right: 0; 
            margin: 4px; 
            padding: 4px 8px; 
            font-size: 12px; 
            background-color: rgba(200, 200, 200, 0.2); 
            color: #fff; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer; 
            transition: all 0.2s ease-in-out;
        `;

        // Button Hover-Effekte
        button.addEventListener('mouseenter', function () {
            button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
        });

        button.addEventListener('mouseleave', function () {
            button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
        });

        // Klick-Event zum Kopieren
        button.addEventListener('click', function () {
            // Codeinhalt kopieren
            var range = document.createRange();
            range.selectNodeContents(code);
            var selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);

            try {
                document.execCommand('copy');
                button.textContent = 'Copied!';
                button.style.backgroundColor = '#333';
                button.style.color = '#fff';
            } catch (err) {
                console.error('Copy failed', err);
                button.textContent = 'Failed!';
            }

            // Auswahl zurücksetzen
            selection.removeAllRanges();

            // Button nach 3 Sekunden zurücksetzen
            setTimeout(function () {
                button.textContent = 'Copy Code';
                button.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
                button.style.color = '#fff';
            }, 3000);
        });

        // Block-Style anpassen
        block.style.position = 'relative';
        block.insertBefore(button, code);
    });

    // Farbe für den Text in Code-Blöcken setzen
    document.querySelectorAll('.wp-block-code pre').forEach(function (text) {
        text.style.color = '#fff'; // Optional: Kann entfernt oder angepasst werden
    });
});
</script>

<pre><code>body {
  background-color: #f49e7e;
}</code></pre>