Code-Blöcke ohne Plugin verschönern und mit Kopieren-Button ausstatten

Wenn du auf deiner WordPress-Seite technische Inhalte veröffentlichst, musst du oft Code-Beispiele zeigen. Viele greifen dafür zu schweren Plugins wie „SyntaxHighlighter“. Dabei ist das gar nicht nötig: Mit ein wenig CSS und einem kleinen JavaScript kannst du deine Code-Blöcke optisch aufwerten und gleichzeitig einen praktischen Kopieren-Button hinzufügen.

---

Vorteile

• 🚀 Schnellere Ladezeit – Keine zusätzlichen Plugins oder großen JS-Bibliotheken.
• 🎨 Individuelles Design – Passe Hintergrund, Schriftart und Farben per CSS nach deinen Wünschen an.
• 📋 Praktischer Kopier-Button – Mit einem Klick landet der Code in der Zwischenablage.
• 🛡️ Weniger Abhängigkeiten – Weniger externe Libraries, dadurch weniger Sicherheitsrisiken.

---

Umsetzung

1) CSS hinzufügen

Im WordPress-Backend unter Design → Customizer → Zusätzliches CSS folgenden Code einfügen:

pre, code { font-family:"Fira Code","Consolas",monospace; font-size:0.9em; }
pre {
  position: relative;
  background:#1e1e1e; color:#e6e6e6;
  padding:14px 16px 16px;
  border-radius:8px; overflow-x:auto; line-height:1.5; margin:1em 0;
}
pre code { background:transparent; color:inherit; }

/* Kopieren-Button */
.kc-copy-btn{
  position:absolute; top:8px; right:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  font:12px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  border:1px solid #334155; border-radius:6px;
  background:#0b1220; color:#cbd5e1;
  cursor:pointer;
}
.kc-copy-btn::before{ content:"📋"; }
.kc-copy-btn.is-copied{ background:#16a34a; border-color:#15803d; color:#fff; }
.kc-copy-btn.is-copied::before{ content:"✔"; }

2) JavaScript hinzufügen

Unter Design → Widgets → Footer → Individuelles HTML folgenden Code einfügen:

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('pre > code').forEach((code) => {
    const pre = code.parentElement;
    if (pre.querySelector('.kc-copy-btn')) return;

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'kc-copy-btn';
    btn.textContent = 'Kopieren';

    btn.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(code.innerText);
        btn.classList.add('is-copied');
        btn.textContent = 'Kopiert!';
        setTimeout(() => { btn.classList.remove('is-copied'); btn.textContent = 'Kopieren'; }, 1800);
      } catch {
        btn.textContent = 'Fehler :(';
        setTimeout(() => { btn.textContent = 'Kopieren'; }, 1800);
      }
    });

    pre.appendChild(btn);
  });
});
</script>

3) Testen

Ab sofort erscheint bei jedem <pre><code>...</code></pre>-Block ein dunkler Hintergrund sowie rechts oben ein Kopieren-Button. Ein Klick genügt, und der Code wird automatisch in die Zwischenablage kopiert.

---

Beispielbilder

---

• Darstellung des Code-Blocks mit dunklem Hintergrund
• Ansicht mit „📋 Kopieren“-Button
• Nach dem Klick die grüne „✔ Kopiert!“-Bestätigung

---

🔑 Mit dieser Methode machst du deine Seite leichter, schneller und zugleich benutzerfreundlicher.