{"id":3666,"date":"2025-10-27T01:04:14","date_gmt":"2025-10-26T22:04:14","guid":{"rendered":"https:\/\/de.davidka.net\/de\/?p=3666"},"modified":"2025-10-27T01:14:58","modified_gmt":"2025-10-26T22:14:58","slug":"code-highlighting-in-wordpress-mit-gutenberg-und-prism-js","status":"publish","type":"post","link":"http:\/\/de.davidka.net\/de\/2025\/10\/27\/code-highlighting-in-wordpress-mit-gutenberg-und-prism-js\/","title":{"rendered":"Code-Highlighting in WordPress mit Gutenberg und Prism.js"},"content":{"rendered":"\n

Wenn Sie Inhalte in WordPress erstellen, verwenden Sie meist den Gutenberg-Editor<\/strong>.
Er wurde mit WordPress 5.0<\/strong> (Dezember 2018) eingef\u00fchrt und hat den alten Texteditor TinyMCE<\/strong> ersetzt.<\/p>\n\n\n\n

TinyMCE<\/strong> war ein einfacher Editor aus der Web-1.0-\u00c4ra<\/strong> \u2013 ein <textarea><\/code>-Feld mit Schaltfl\u00e4chen wie \u201eFett\u201c, \u201eKursiv\u201c und \u201eLink\u201c.
Der gesamte Text wurde als durchgehender HTML-Strom gespeichert, was es schwierig machte, Abs\u00e4tze zu verschieben oder etwas dazwischen einzuf\u00fcgen.
Au\u00dferdem unterst\u00fctzte TinyMCE kein responsives 12-Spalten-Layout<\/strong>, das in der Web-2.0-\u00c4ra<\/strong> zum De-facto-Standard wurde.
Komplexe Layouts mussten daher manuell mit HTML und CSS erstellt werden.<\/p>\n\n\n\n

\n\n\n\n

Gutenberg \u2013 ein Editor der neuen Generation<\/h2>\n\n\n\n

Der Gutenberg-Editor<\/strong> hat dieses Problem gel\u00f6st.
Jeder Teil einer Seite existiert jetzt als Block<\/strong> \u2013 \u00dcberschrift, Absatz, Zitat, Bild, Tabelle oder Code-Block \u2013
was die Bearbeitung vereinfacht und das Layout flexibel und anpassbar macht.<\/p>\n\n\n\n

Inhalte sollten auf allen Ger\u00e4ten gut aussehen \u2013 vom Smartphone bis zum gro\u00dfen Monitor.
Wenn eine Website nicht responsiv ist, verrutscht der Text, Bilder werden abgeschnitten und Tabellen laufen \u00fcber den Rand.
Dies wird durch ein responsives Layout<\/strong> gel\u00f6st, das sich automatisch an die Bildschirmbreite anpasst.<\/p>\n\n\n\n

Die Grundlage dieses Layouts ist ein 12-Spalten-Raster<\/strong>, bekannt durch Frameworks wie Bootstrap<\/strong> und Foundation<\/strong>.
Die Breite des Containers wird in 12 gleich gro\u00dfe Teile (je 8,33 %) unterteilt, womit sich nahezu jedes Layout bauen l\u00e4sst.<\/p>\n\n\n\n

Beispiel:<\/p>\n\n\n\n

1 Spalte  \u2192 [\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588] 100 %\n2 Spalten \u2192 [\u2588\u2588\u2588\u2588\u2588\u2588][\u2588\u2588\u2588\u2588\u2588\u2588] 6\/6\n3 Spalten \u2192 [\u2588\u2588\u2588\u2588][\u2588\u2588\u2588\u2588][\u2588\u2588\u2588\u2588] 4\/4\/4\n4 Spalten \u2192 [\u2588\u2588\u2588][\u2588\u2588\u2588][\u2588\u2588\u2588][\u2588\u2588\u2588] 3\/3\/3\/3\n<\/code><\/pre>\n\n\n\n
Auf Mobilger\u00e4ten werden die Spalten automatisch vertikal angeordnet,
sodass der Inhalt \u00fcbersichtlich und lesbar bleibt.<\/p>\n\n\n\n
\n\n\n\n
Wie Gutenberg das Raster umsetzt<\/h2>\n\n\n\n
In Gutenberg wird das 12-Spalten-Raster mit dem Spalten-Block (Columns)<\/strong> realisiert,
der die Elemente automatisch an die Bildschirmbreite anpasst.
In HTML werden Container mit den Klassen wp-block-columns<\/code> und wp-block-column<\/code> verwendet,
und in CSS sorgt Flexbox<\/strong> f\u00fcr Ausrichtung und Verhalten der Spalten.<\/p>\n\n\n\n
Beispiel:<\/p>\n\n\n\n
<div class="wp-block-columns">\n  <div class="wp-block-column">\n    <p>Erste Spalte<\/p>\n  <\/div>\n  <div class="wp-block-column">\n    <p>Zweite Spalte<\/p>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n
CSS:<\/p>\n\n\n\n
.wp-block-columns {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2em;\n}\n.wp-block-column {\n  flex-grow: 1;\n  flex-basis: 0;\n}\n@media (max-width: 600px) {\n  .wp-block-columns {\n    flex-direction: column;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Diese Struktur macht Gutenberg flexibel und sorgt f\u00fcr konsistente Darstellung auf allen Ger\u00e4ten.<\/p>\n\n\n\n
\n\n\n\n
Das Problem des Standard-Codeblocks<\/h2>\n\n\n\n
Unter den vielen Gutenberg-Bl\u00f6cken verdient der Code-Block<\/strong> besondere Aufmerksamkeit.
Er dient zur Anzeige von Programmcodes, Skripten oder Konfigurationen.
Technisch gesehen ist es ein einfacher HTML-Container:<\/p>\n\n\n\n
<pre> ... <\/pre>\n<\/code><\/pre>\n\n\n\n
Gutenberg und TinyMCE zeigen ihn gleich an \u2013 als monospace-Text<\/strong>
(meist mit den Schriftarten Consolas<\/code>, Courier New<\/code> oder Monaco<\/code>)
ohne Syntax-Highlighting oder Zeilennummern.<\/p>\n\n\n\n
F\u00fcr einfache Texte reicht das, aber bei technischen Artikeln oder Tutorials
ist Code ohne Farbe schwer lesbar.
Die einfachste L\u00f6sung ist Prism.js<\/strong>.<\/p>\n\n\n\n
\n\n\n\n
Was ist Prism.js?<\/h2>\n\n\n\n
Prism.js<\/strong> ist eine leichte JavaScript-Bibliothek f\u00fcr Syntax-Highlighting direkt im Browser.
Sie ben\u00f6tigt keinen Server-Support \u2013 das Skript analysiert den Inhalt zwischen <pre><code>...<\/code><\/pre><\/code>,
und die CSS-Datei prism.css<\/code> f\u00e4rbt Schl\u00fcsselw\u00f6rter, Zeichenketten, Zahlen und Kommentare ein.<\/p>\n\n\n\n
Prism unterst\u00fctzt Dutzende Programmiersprachen \u2013 von HTML und JavaScript bis Python und Go \u2013
und bietet viele Plugins: Zeilennummern, Kopierschaltfl\u00e4che, Sprachlabel, helle\/dunkle Themen und mehr.<\/p>\n\n\n\n
Beispiel:<\/p>\n\n\n\n
<pre><code class="language-js">\nfunction hello(name) {\n  return `Hello, ${name}!`;\n}\n<\/code><\/pre>\n<\/code><\/pre>\n\n\n\n
Nach dem Einbinden von Prism.js wird dieser Code automatisch im Browser hervorgehoben.<\/p>\n\n\n\n
\n\n\n\n
Arbeiten mit einem Child-Theme<\/h2>\n\n\n\n
Bevor Sie Prism.js hinzuf\u00fcgen, sollten Sie den Haupt-Theme-Code nicht direkt \u00e4ndern.
Alle Anpassungen in WordPress sollten in einem Child-Theme<\/strong> erfolgen.<\/p>\n\n\n\n
Ein WordPress-Theme steuert das Aussehen der Website \u2013 Vorlagen, Stile, Men\u00fcs, Header und Footer.
Wenn Sie den aktiven Theme \u00e4ndern, werden Ihre \u00c4nderungen beim n\u00e4chsten Update \u00fcberschrieben.<\/p>\n\n\n\n
Ein Child-Theme l\u00f6st dieses Problem: Es erbt das Eltern-Theme,
beh\u00e4lt Ihre Anpassungen aber separat bei und sch\u00fctzt sie vor Updates.<\/p>\n\n\n\n
Erstellen Sie einen Ordner:<\/p>\n\n\n\n
\/wp-content\/themes\/mein-child-theme\/\n<\/code><\/pre>\n\n\n\n
Erstellen Sie darin eine Datei style.css<\/code>:<\/p>\n\n\n\n
\/*\n Theme Name:   Mein Child-Theme\n Template:     mein-theme\n Version:      1.0\n*\/\n<\/code><\/pre>\n\n\n\n
Das Feld Template<\/code> muss dem Ordnernamen des Eltern-Themes entsprechen.
Dann erstellen Sie functions.php<\/code>:<\/p>\n\n\n\n
<?php\nadd_action('wp_enqueue_scripts', 'child_enqueue_styles');\nfunction child_enqueue_styles() {\n    wp_enqueue_style('parent-style', get_template_directory_uri() . '\/style.css');\n    wp_enqueue_style('child-style',\n        get_stylesheet_directory_uri() . '\/style.css',\n        array('parent-style')\n    );\n}\n<\/code><\/pre>\n\n\n\n
Aktivieren Sie das Child-Theme unter Design \u2192 Themes<\/strong>
und f\u00fchren Sie alle Anpassungen dort aus.<\/p>\n\n\n\n
\n\n\n\n
Verwendung der Website Prism.js<\/h2>\n\n\n\n
Wenn Ihr Child-Theme bereit ist, besuchen Sie die offizielle Prism.js-Website:
\ud83d\udc49 https:\/\/prismjs.com<\/a><\/p>\n\n\n\n
\u00d6ffnen Sie den Reiter Download<\/strong>, um Ihre eigene Version der Bibliothek zusammenzustellen.<\/p>\n\n\n\n
Empfohlene Einstellungen<\/h3>\n\n\n\n
    \n
  1. Compression level:<\/strong> Minified<\/code><\/li>\n\n\n\n
  2. Languages:<\/strong> HTML, CSS, JavaScript, PHP, Python, JSON<\/li>\n\n\n\n
  3. Plugins:<\/strong>\n
      \n
    • Line Numbers<\/li>\n\n\n\n
    • Toolbar<\/li>\n\n\n\n
    • Copy to Clipboard Button<\/li>\n\n\n\n
    • (optional) Show Language<\/li>\n\n\n\n
    • (optional) Highlight Lines<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
      Laden Sie anschlie\u00dfend herunter:<\/p>\n\n\n\n
        \n
      • DOWNLOAD JS<\/strong> \u2192 prism.js<\/code><\/li>\n\n\n\n
      • DOWNLOAD CSS<\/strong> \u2192 prism.css<\/code><\/li>\n<\/ul>\n\n\n\n
        Speichern Sie beide Dateien im Ordner Ihres Child-Themes:<\/p>\n\n\n\n
        \/wp-content\/themes\/mein-child-theme\/\n<\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Prism.js in WordPress einbinden<\/h2>\n\n\n\n
        \u00d6ffnen Sie functions.php<\/code> und f\u00fcgen Sie Folgendes hinzu:<\/p>\n\n\n\n
        add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');\nfunction theme_enqueue_prism_assets() {\n    $version = '1.29.0';\n    wp_enqueue_style('prism-css',\n        get_stylesheet_directory_uri() . '\/prism.css', [], $version);\n    wp_enqueue_script('prism-js',\n        get_stylesheet_directory_uri() . '\/prism.js', [], $version, true);\n}\n<\/code><\/pre>\n\n\n\n
        Prism.js hebt nun automatisch jeden Code innerhalb von
        <pre><code>...<\/code><\/pre><\/code> hervor.<\/p>\n\n\n\n
        \n\n\n\n
        Automatische Zeilennummerierung<\/h2>\n\n\n\n
        F\u00fcgen Sie einen WordPress-Filter hinzu, um Zeilennummern automatisch einzuf\u00fcgen:<\/p>\n\n\n\n
        add_filter('render_block_core\/code', 'theme_add_prism_line_numbers', 10, 2);\nfunction theme_add_prism_line_numbers($content, $block) {\n    return str_replace(\n        '<pre class="wp-block-code">',\n        '<pre class="wp-block-code line-numbers">',\n        $content\n    );\n}\n<\/code><\/pre>\n\n\n\n
        \n\n\n\n
        HTML-Zeichen escapen<\/h2>\n\n\n\n
        Wenn Ihr Code <<\/code> oder ><\/code> enth\u00e4lt, kann der Browser diese als HTML-Tags interpretieren.
        Um dies zu verhindern, f\u00fcgen Sie einen Filter hinzu, der diese Zeichen beim Speichern automatisch ersetzt:<\/p>\n\n\n\n
        add_filter('content_save_pre', 'theme_escape_code_on_save');\nfunction theme_escape_code_on_save($content) {\n    return preg_replace_callback(\n        '\/<code([^>]*)>(.*?)<\\\/code>\/is',\n        function ($m) {\n            $attrs = $m[1];\n            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');\n            return "<code{$attrs}>{$code}<\/code>\";\n        },\n        $content\n    );\n}\n<\/code><\/pre>\n\n\n\n
        \n\n\n\n
        CSS-Stile f\u00fcr Codebl\u00f6cke<\/h2>\n\n\n\n
        F\u00fcgen Sie diese Stile in die style.css<\/code> Ihres Child-Themes ein:<\/p>\n\n\n\n
        pre[class*="language-"] {\n  border-radius: 6px;\n  border: 1px solid #ddd;\n  padding: 1em;\n  background: #f6f8fa;\n  font-family: 'Fira Code', Consolas, monospace;\n  font-size: 14px;\n  line-height: 1.6;\n  overflow: auto;\n}\npre[class*="language-"].line-numbers {\n  padding-left: 3.8em;\n}\n<\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Zus\u00e4tzliche Funktionen von Prism.js<\/h2>\n\n\n\n
          \n
        • \ud83d\udd22 Zeilennummern<\/strong> \u2013 f\u00fcgt Nummern wie in einem IDE hinzu.<\/li>\n\n\n\n
        • \ud83e\udde0 Hervorhebung bestimmter Zeilen<\/strong> \u2013 mit data-line="2,4-5"<\/code>.<\/li>\n\n\n\n
        • \ud83d\udccb Kopier-Button<\/strong> \u2013 kopiert Code mit einem Klick.<\/li>\n\n\n\n
        • \ud83d\udca1 Sprachlabel<\/strong> \u2013 zeigt den Namen der Sprache \u00fcber dem Block an.<\/li>\n\n\n\n
        • \ud83c\udf17 Hell-\/Dunkel-Thema<\/strong> \u2013 automatischer Wechsel:<\/li>\n<\/ul>\n\n\n\n
          @media (prefers-color-scheme: dark) {\n  body { background: #1e1e1e; color: #d4d4d4; }\n}\n<\/code><\/pre>\n\n\n\n
            \n
          • \ud83c\udfa8 Anpassung<\/strong> \u2013 \u00e4ndern Sie Farben direkt in style.css<\/code>:<\/li>\n<\/ul>\n\n\n\n
            .token.keyword { color: #d73a49; font-weight: 600; }\n.token.string  { color: #032f62; }\n.token.comment { color: #6a737d; font-style: italic; }\n<\/code><\/pre>\n\n\n\n
            \n\n\n\n
            Vorher und nachher mit Prism.js<\/h2>\n\n\n\n
            Vorher<\/h3>\n\n\n\n
            <pre><code>\nfunction greet(name) {\n  return `Hello, ${name}`;\n}\n<\/code><\/pre>\n<\/code><\/pre>\n\n\n\n
            Ergebnis:<\/p>\n\n\n\n
            function greet(name) {\n  return `Hello, ${name}`;\n}\n<\/code><\/pre>\n\n\n\n
            Monospace-Text, ohne Farbe und Zeilennummern.<\/p>\n\n\n\n
            \n\n\n\n
            Nachher<\/h3>\n\n\n\n
            <pre class="line-numbers"><code class="language-js">\nfunction greet(name) {\n  return `Hello, ${name}`;\n}\n<\/code><\/pre>\n<\/code><\/pre>\n\n\n\n
            Ergebnis:<\/p>\n\n\n\n
            1 function greet(name) {\n2   return `Hello, ${name}`;\n3 }\n<\/code><\/pre>\n\n\n\n
            Jede Zeile ist nummeriert, der Code farbig hervorgehoben,
            und ein Copy<\/strong>-Button erscheint zum schnellen Kopieren.<\/p>\n\n\n\n
            \n\n\n\n
            Prism.js<\/strong> macht Codebl\u00f6cke klarer und besser lesbar.
            Es funktioniert vollst\u00e4ndig im Browser, ohne zus\u00e4tzliche Plugins,
            und beeintr\u00e4chtigt die Performance nicht.
            Einmal eingerichtet, erscheint Ihr Code sauber, strukturiert und professionell.<\/p>\n","protected":false},"excerpt":{"rendered":"
            Der Standardblock **\u201eCode\u201c** im Gutenberg-Editor unterst\u00fctzt keine Syntaxhervorhebung. Die Bibliothek **Prism.js** l\u00f6st dieses Problem, indem sie eine elegante Codehervorhebung mit Zeilennummerierung und zus\u00e4tzlichen Funktionen hinzuf\u00fcgt.<\/p>\n","protected":false},"author":1,"featured_media":3667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-3666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/3666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/comments?post=3666"}],"version-history":[{"count":0,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/3666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/media\/3667"}],"wp:attachment":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/media?parent=3666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/categories?post=3666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/tags?post=3666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}