{"id":2460,"date":"2025-09-16T18:56:47","date_gmt":"2025-09-16T16:56:47","guid":{"rendered":"https:\/\/davidka.net\/en\/?p=2460"},"modified":"2025-09-22T03:34:44","modified_gmt":"2025-09-22T01:34:44","slug":"guttenberg-prism-wordpress","status":"publish","type":"post","link":"https:\/\/de.davidka.net\/de\/2025\/09\/16\/guttenberg-prism-wordpress\/","title":{"rendered":"Anleitung zur Einrichtung der Code-Hervorhebung f\u00fcr Gutenberg und Prism.js"},"content":{"rendered":"\n<p class=\"has-neve-link-color-color has-text-color has-link-color has-medium-font-size wp-elements-73418479668b67ab519fa9390cf2e8fc wp-block-paragraph\">Der standardm\u00e4\u00dfige &#8222;Code&#8220;-Block in Gutenberg unterst\u00fctzt keine Syntaxhervorhebung. Die Bibliothek <strong>Prism.js<\/strong> l\u00f6st dieses Problem. Diese Anleitung beschreibt, wie Sie Prism.js einrichten, einschlie\u00dflich einer automatischen L\u00f6sung f\u00fcr Anzeigeprobleme mit den HTML-Zeichen <code class=\"\" data-line=\"\">&lt;<\/code> und <code class=\"\" data-line=\"\">&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Das Problem: Konflikt mit HTML-Tags<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Browser interpretiert die Zeichen <code class=\"\" data-line=\"\">&lt;<\/code> und <code class=\"\" data-line=\"\">&gt;<\/code> innerhalb von Codebl\u00f6cken als HTML-Tags, was das Seitenlayout zerst\u00f6rt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die L\u00f6sung: Zeichen-Escaping<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr eine korrekte Darstellung m\u00fcssen Sonderzeichen durch HTML-Entit\u00e4ten ersetzt werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">&lt;<\/code> wird durch <code class=\"\" data-line=\"\">&lt;<\/code> ersetzt<\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">&gt;<\/code> wird durch <code class=\"\" data-line=\"\">&gt;<\/code> ersetzt<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dieser Prozess wird mit einem WordPress-Filter automatisiert, um manuelle Ersetzungen und Probleme mit dem Gutenberg-Editor zu vermeiden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt-f\u00fcr-Schritt-Anleitung<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Schritt 0: Ein Child-Theme vorbereiten<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Alle \u00c4nderungen m\u00fcssen in einem <strong>Child-Theme<\/strong> vorgenommen werden, um sicherzustellen, dass sie bei einer Aktualisierung des Eltern-Themes nicht gel\u00f6scht werden.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Schritt 1: Eine Prism.js-Version herunterladen und konfigurieren<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Gehen Sie zur Website:<\/strong> <a href=\"https:\/\/prismjs.com\/download.html\">prismjs.com\/download.html<\/a>.<\/li>\n\n\n\n<li><strong>W\u00e4hlen Sie die Komponenten aus:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Komprimierungsstufe (Compression level):<\/strong> <code class=\"\" data-line=\"\">Minified<\/code>.<\/li>\n\n\n\n<li><strong>Sprachen (Languages):<\/strong> <code class=\"\" data-line=\"\">Markup<\/code>, <code class=\"\" data-line=\"\">CSS<\/code>, <code class=\"\" data-line=\"\">C-like<\/code>, <code class=\"\" data-line=\"\">JavaScript<\/code>. F\u00fcgen Sie alle anderen erforderlichen Sprachen hinzu.<\/li>\n\n\n\n<li><strong>Plugins:<\/strong> <strong>Line Numbers<\/strong>, <strong>Toolbar<\/strong>, <strong>Copy to Clipboard Button<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Laden Sie die Dateien herunter:<\/strong> Klicken Sie auf <strong>DOWNLOAD JS<\/strong> und <strong>DOWNLOAD CSS<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Platzieren Sie die heruntergeladenen Dateien <code class=\"\" data-line=\"\">prism.js<\/code> und <code class=\"\" data-line=\"\">prism.css<\/code> im Hauptverzeichnis Ihres Child-Themes.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Schritt 2: Dateien in <code class=\"\" data-line=\"\">functions.php<\/code> einbinden<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Um die Dateien in WordPress einzubinden, \u00f6ffnen Sie die <code class=\"\" data-line=\"\">functions.php<\/code>-Datei Ihres Child-Themes und f\u00fcgen Sie den folgenden Code hinzu:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">&lt;?php\n\n\/**\n * Bindet Stile und Skripte f\u00fcr die Code-Hervorhebung ein.\n *\/\nadd_action(&#039;wp_enqueue_scripts&#039;, &#039;theme_enqueue_prism_assets&#039;);\nfunction theme_enqueue_prism_assets() {\n    \/\/ Prism-Stile einbinden\n    wp_enqueue_style(\n        &#039;prism-css&#039;,\n        get_stylesheet_directory_uri() . &#039;\/prism.css&#039;,\n        array(),\n        &#039;1.29.0&#039; \/\/ Version zur Cache-Kontrolle\n    );\n\n    \/\/ Prism-Skript einbinden\n    wp_enqueue_script(\n        &#039;prism-js&#039;,\n        get_stylesheet_directory_uri() . &#039;\/prism.js&#039;,\n        array(),\n        &#039;1.29.0&#039;,\n        true \/\/ Im Footer laden\n    );\n}\n\n\/**\n * F\u00fcgt Gutenberg-Codebl\u00f6cken automatisch Klassen hinzu.\n *\/\nadd_filter(&#039;render_block_core\/code&#039;, &#039;theme_add_prism_classes_to_code_block&#039;, 10, 2);\nfunction theme_add_prism_classes_to_code_block($block_content, $block) {\n    \/\/ F\u00fcgt die Klasse line-numbers zum &lt;pre&gt;-Tag hinzu\n    $block_content = str_replace(&#039;&lt;pre class=&quot;wp-block-code&quot;&gt;&#039;, &#039;&lt;pre class=&quot;wp-block-code line-numbers&quot;&gt;&#039;, $block_content);\n    return $block_content;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dieser Code bindet die Dateien ein und aktiviert die Zeilennummerierung.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Schritt 3: Automatisches Escaping von Zeichen<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Der entscheidende Schritt ist das Hinzuf\u00fcgen eines Filters in <code class=\"\" data-line=\"\">functions.php<\/code>, um Sonderzeichen vor dem Speichern des Beitrags automatisch zu escapen.<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">\/**\n * Escaped HTML-Zeichen innerhalb von &lt;code&gt;-Tags beim Speichern eines Beitrags.\n *\/\nadd_filter(&#039;content_save_pre&#039;, &#039;theme_escape_code_on_save&#039;);\nfunction theme_escape_code_on_save($content) {\n    \/\/ Findet alle &lt;code&gt;...<\/code>-Bl\u00f6cke\n    return preg_replace_callback('\/<code class=\" language-python\" data-line=\"\">(.*?)&lt;\\\/code&gt;\/is&#039;, function($matches) {\n        $attributes = $matches&#091;1]; \/\/ Tag-Attribute\n        $code_content = $matches&#091;2]; \/\/ Tag-Inhalt\n\n        \/\/ Den Inhalt escapen\n        $escaped_content = htmlspecialchars($code_content, ENT_NOQUOTES, &#039;UTF-8&#039;);\n\n        \/\/ Das Tag wieder zusammensetzen\n        return &#039;&lt;code&#039; . $attributes . &#039;&gt;&#039; . $escaped_content . &#039;<\/code>';\n    }, $content);\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der <code class=\"\" data-line=\"\">content_save_pre<\/code>-Hook wird vor dem Schreiben in die Datenbank ausgel\u00f6st. Die <code class=\"\" data-line=\"\">htmlspecialchars<\/code>-Funktion wandelt Sonderzeichen in sichere HTML-Entit\u00e4ten um.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Schritt 4: Styling in <code class=\"\" data-line=\"\">style.css<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcgen Sie f\u00fcr eine saubere Darstellung die folgenden Stile zur <code class=\"\" data-line=\"\">style.css<\/code>-Datei Ihres Child-Themes hinzu:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">\/* Stile f\u00fcr Codebl\u00f6cke *\/\npre&#091;class*=&quot;language-&quot;] {\n    border-radius: 5px;\n    border: 1px solid #ddd;\n    font-size: 14px;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n}\n\n\/* Stile f\u00fcr die Prism-Toolbar *\/\ndiv.code-toolbar {\n    position: relative;\n}\n\ndiv.code-toolbar &gt; .toolbar {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    opacity: 0;\n    transition: opacity 0.3s ease-in-out;\n}\n\ndiv.code-toolbar:hover &gt; .toolbar {\n    opacity: 1; \/* Schaltfl\u00e4che beim Hovern anzeigen *\/\n}\n\n.toolbar-item button {\n    padding: 5px 10px;\n    background: #f5f5f5;\n    color: #333;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 13px;\n    cursor: pointer;\n}\n\n.toolbar-item button:hover {\n    background-color: #e0e0e0;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ergebnis<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nach Abschluss dieser Schritte wird jeder Codeblock in Gutenberg Folgendes haben:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatische Syntaxhervorhebung.<\/li>\n\n\n\n<li>Zeilennummern.<\/li>\n\n\n\n<li>Eine Schaltfl\u00e4che zum Kopieren.<\/li>\n\n\n\n<li>Korrekte Darstellung von HTML-Tags, ohne das Layout zu zerst\u00f6ren.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Der standardm\u00e4\u00dfige &#8222;Code&#8220;-Block in Gutenberg unterst\u00fctzt keine Syntaxhervorhebung. Die Bibliothek Prism.js l\u00f6st dieses Problem. Diese Anleitung beschreibt, wie Sie Prism.js einrichten, einschlie\u00dflich einer automatischen L\u00f6sung f\u00fcr Anzeigeprobleme mit den HTML-Zeichen < und >.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"neve_meta_title_alignment":"left","neve_meta_author_avatar":"on","neve_post_elements_order":"[\"content\",\"tags\",\"comments\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-2460","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/2460","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=2460"}],"version-history":[{"count":0,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/2460\/revisions"}],"wp:attachment":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/media?parent=2460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/categories?post=2460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/tags?post=2460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}