Skip to main content

Syntax-Highlighter-Libraries für JS: Überblick & Empfehlung 🎨

Für die direkte CDN-Einbindung in eine Website (ohne Build-Tools wie Webpack/Vite) kommen praktisch drei relevante Kandidaten in Frage. Hier eine Einordnung – speziell mit Blick auf deinen Workflow mit Bricks Builder und Divi.

Die wichtigsten Libraries

Library Prinzip CDN-tauglich? Besonderheit
Prism.js Client-seitig, statische Grammatiken ✅ Sehr gut Riesiges Theme-Angebot, Plugin-System (Zeilennummern, Copy-Button, Diff-Highlighting)
highlight.js Client-seitig, automatische Spracherkennung ✅ Sehr gut Erkennt Sprache oft automatisch, wenn du class="language-xxx" vergisst
Shiki Nutzt die TextMate-Grammatiken von VS Code ⚠️ Bedingt Optisch das genaueste Highlighting, aber eigentlich für Build-Time/SSR gedacht – für reines CDN-Einbinden overkill
Rainbow.js Client-seitig, minimalistisch ✅ Kaum noch weiterentwickelt – eher meiden
Torchlight API-basiert (Server rendert HTML) ⚠️ Kostenpflichtig, kein "echtes" CDN-Snippet

🏆 Empfehlung: Prism.js

Für deinen Anwendungsfall – Code-Snippets per Custom-HTML-Element in Bricks oder Divi einbinden – ist Prism.js die beste Wahl:

  • Extrem leichtgewichtig: Basis-Bibliothek nur wenige KB, jede Sprache kostet nur 0,3–0,5 KB zusätzlich.
  • Riesige Auswahl an fertigen Themes (z. B. Tomorrow Night, Okaidia, Solarized) – passt gut zu deinem CSS/SCSS-Faible, da sich Themes leicht per eigenem CSS überschreiben lassen.
  • Kein Build-Prozess nötig – reines <script>- und <link>-Tag reicht, ideal für PHP-Einbindung in WordPress ohne tiefes Verständnis der internen Abläufe.
  • Sehr gute Doku, riesige Verbreitung, aktiv gepflegt.

Minimal-Setup per CDN

<!-- Theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">

<!-- Core + gewünschte Sprachen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

Mit dem Autoloader-Plugin musst du dir um einzelne Sprachdateien keine Gedanken machen – Prism lädt die passende Grammatik automatisch nach, sobald es ein <code class="language-php"> (oder -js, -css etc.) findet.

<pre><code class="language-php">
function hello() {
    echo "Hallo Welt";
}
</code></pre>

In Bricks Builder einbinden

  • Head-Skript (Einstellungen → Custom Code → Head): die <link>- und <script>-Tags dort platzieren.
  • Für die eigentlichen Code-Blöcke im Content ein Code-Element oder ein Custom-HTML-Element nutzen und die <pre><code>-Struktur einfügen.
  • Da Prism nach dem Laden automatisch beim DOMContentLoaded scannt, brauchst du meist keine eigene JS-Logik – perfekt für deine Ausgangslage bei JS/PHP.

Alternative: highlight.js

Wenn dir automatische Spracherkennung ohne language-xxx-Klasse wichtiger ist als Theme-Vielfalt, ist highlight.js die zweitbeste Option:

Nachteil gegenüber Prism: etwas größere Grundlast und weniger flexibles Plugin-Ökosystem (z. B. für Zeilennummern braucht man Zusatz-Snippets).

Warum nicht Shiki?

Shiki liefert zwar das optisch genaueste Ergebnis (gleiche Engine wie VS Code), ist aber primär für Server-Side-Rendering oder Build-Time-Highlighting konzipiert. Für ein einfaches CDN-Skript auf einer WordPress-Seite ist der Overhead (WASM-basierte Oniguruma-Engine, größere Bundle-Größe) unnötig komplex – das würde dir ohne tiefere JS-Kenntnisse mehr Kopfschmerzen als Nutzen bringen.

Kurz gesagt: 🎯 Prism.js ist für dein Setup der Sweet Spot aus einfacher CDN-Einbindung, geringer Ladezeit und hoher visueller Anpassbarkeit über CSS – ganz ohne dass du dich mit WordPress-internen PHP-Prozessen auseinandersetzen musst.

Back to top