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:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
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.