{"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:\/\/it.davidka.net\/it\/guttenberg-prism-wordpress\/","title":{"rendered":"Guida alla configurazione dell&#8217;evidenziazione del codice per Gutenberg e Prism.js"},"content":{"rendered":"\n<p class=\"has-neve-link-color-color has-text-color has-link-color has-medium-font-size wp-elements-70e497206ba7d89cbfadbb709cd294f0 wp-block-paragraph\">Il blocco &#8220;Codice&#8221; predefinito di Gutenberg non supporta l&#8217;evidenziazione della sintassi. La libreria <strong>Prism.js<\/strong> risolve questo problema. Questa guida descrive come configurare Prism.js, includendo una soluzione automatica per i problemi di visualizzazione dei caratteri HTML <code class=\"\" data-line=\"\">&lt;<\/code> e <code class=\"\" data-line=\"\">&gt;<\/code>.<\/p>\n\n\n\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame2 preset1 animation-fade rtoc_open default\" data-id=\"2460\" data-theme=\"Neve - Davidka\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\"rtoc_btn_none rtoc_left\">\n\t\t\t\n\t\t\t<span>In Questo Articolo<\/span>\n\t\t\t<\/div><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-1\">Il problema: Conflitto con i tag HTML<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-2\">La soluzione: Escape dei caratteri<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-3\">Configurazione passo dopo passo<\/a><ul class=\"rtoc-mokuji mokuji_none level-3\"><li class=\"rtoc-item\"><a href=\"#rtoc-4\">Passo 0: Preparare un tema figlio<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-5\">Passo 1: Scaricare e configurare una build di Prism.js<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-6\">Passo 2: Includere i file in <code class=\"\" data-line=\"\">functions.php<\/code><\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-7\">Passo 3: Eseguire l&#8217;escape automatico dei caratteri<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-8\">Passo 4: Stile in <code class=\"\" data-line=\"\">style.css<\/code><\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-9\">Risultato<\/a><\/li><\/ul><\/li><\/ol><\/div><h3 id=\"rtoc-1\"  class=\"wp-block-heading\">Il problema: Conflitto con i tag HTML<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un browser interpreta i caratteri <code class=\"\" data-line=\"\">&lt;<\/code> e <code class=\"\" data-line=\"\">&gt;<\/code> all&#8217;interno dei blocchi di codice come tag HTML, il che rompe il layout della pagina.<\/p>\n\n\n\n<h3 id=\"rtoc-2\"  class=\"wp-block-heading\">La soluzione: Escape dei caratteri<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Per una visualizzazione corretta, i caratteri speciali devono essere sostituiti con entit\u00e0 HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">&lt;<\/code> viene sostituito con <code class=\"\" data-line=\"\">&lt;<\/code><\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">&gt;<\/code> viene sostituito con <code class=\"\" data-line=\"\">&gt;<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Questo processo viene automatizzato utilizzando un filtro di WordPress per evitare la sostituzione manuale e problemi con l&#8217;editor di Gutenberg.<\/p>\n\n\n\n<h3 id=\"rtoc-3\"  class=\"wp-block-heading\">Configurazione passo dopo passo<\/h3>\n\n\n\n<h4 id=\"rtoc-4\"  class=\"wp-block-heading\">Passo 0: Preparare un tema figlio<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Tutte le modifiche devono essere apportate in un <strong>tema figlio<\/strong> (child theme) per garantire che non vengano eliminate durante l&#8217;aggiornamento del tema principale.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 id=\"rtoc-5\"  class=\"wp-block-heading\">Passo 1: Scaricare e configurare una build di Prism.js<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Vai al sito web:<\/strong> <a href=\"https:\/\/prismjs.com\/download.html\">prismjs.com\/download.html<\/a>.<\/li>\n\n\n\n<li><strong>Seleziona i componenti:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Livello di compressione (Compression level):<\/strong> <code class=\"\" data-line=\"\">Minified<\/code>.<\/li>\n\n\n\n<li><strong>Linguaggi (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>. Aggiungi qualsiasi altro linguaggio richiesto.<\/li>\n\n\n\n<li><strong>Plugin:<\/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>Scarica i file:<\/strong> Fai clic su <strong>DOWNLOAD JS<\/strong> e <strong>DOWNLOAD CSS<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Posiziona i file <code class=\"\" data-line=\"\">prism.js<\/code> e <code class=\"\" data-line=\"\">prism.css<\/code> scaricati nella cartella principale del tuo tema figlio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 id=\"rtoc-6\"  class=\"wp-block-heading\">Passo 2: Includere i file in <code class=\"\" data-line=\"\">functions.php<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Per includere i file in WordPress, apri il file <code class=\"\" data-line=\"\">functions.php<\/code> del tuo tema figlio e aggiungi il seguente codice:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">&lt;?php\n\n\/**\n * Includi stili e script per l&#039;evidenziazione del codice.\n *\/\nadd_action(&#039;wp_enqueue_scripts&#039;, &#039;theme_enqueue_prism_assets&#039;);\nfunction theme_enqueue_prism_assets() {\n    \/\/ Includi gli stili di Prism\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; \/\/ Versione per il controllo della cache\n    );\n\n    \/\/ Includi lo script di Prism\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 \/\/ Carica nel footer\n    );\n}\n\n\/**\n * Aggiungi automaticamente classi ai blocchi di codice di Gutenberg.\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    \/\/ Aggiungi la classe line-numbers al tag &lt;pre&gt;\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\">Questo codice include i file e attiva la numerazione delle righe.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 id=\"rtoc-7\"  class=\"wp-block-heading\">Passo 3: Eseguire l&#8217;escape automatico dei caratteri<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Il passo chiave \u00e8 aggiungere un filtro in <code class=\"\" data-line=\"\">functions.php<\/code> per eseguire l&#8217;escape automatico dei caratteri speciali prima di salvare l&#8217;articolo.<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">\/**\n * Esegui l&#039;escape dei caratteri HTML all&#039;interno dei tag &lt;code&gt; al salvataggio di un articolo.\n *\/\nadd_filter(&#039;content_save_pre&#039;, &#039;theme_escape_code_on_save&#039;);\nfunction theme_escape_code_on_save($content) {\n    \/\/ Trova tutti i blocchi &lt;code&gt;...<\/code>\n    return preg_replace_callback('\/<code class=\" language-python\" data-line=\"\">(.*?)&lt;\\\/code&gt;\/is&#039;, function($matches) {\n        $attributes = $matches&#091;1]; \/\/ Attributi del tag\n        $code_content = $matches&#091;2]; \/\/ Contenuto del tag\n\n        \/\/ Esegui l&#039;escape del contenuto\n        $escaped_content = htmlspecialchars($code_content, ENT_NOQUOTES, &#039;UTF-8&#039;);\n\n        \/\/ Riassembla il tag\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\">L&#8217;hook <code class=\"\" data-line=\"\">content_save_pre<\/code> si attiva prima di scrivere sul database. La funzione <code class=\"\" data-line=\"\">htmlspecialchars<\/code> converte i caratteri speciali in entit\u00e0 HTML sicure.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 id=\"rtoc-8\"  class=\"wp-block-heading\">Passo 4: Stile in <code class=\"\" data-line=\"\">style.css<\/code><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Per una presentazione pulita, aggiungi i seguenti stili al file <code class=\"\" data-line=\"\">style.css<\/code> del tuo tema figlio:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">\/* Stili per i blocchi di codice *\/\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\/* Stili per la barra degli strumenti di Prism *\/\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; \/* Mostra il pulsante al passaggio del mouse *\/\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 id=\"rtoc-9\"  class=\"wp-block-heading\">Risultato<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dopo aver completato questi passaggi, ogni blocco di codice in Gutenberg avr\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Evidenziazione automatica della sintassi.<\/li>\n\n\n\n<li>Numeri di riga.<\/li>\n\n\n\n<li>Un pulsante per copiare.<\/li>\n\n\n\n<li>Rendering corretto dei tag HTML senza rompere il layout.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il blocco &#8220;Codice&#8221; predefinito di Gutenberg non supporta l&#8217;evidenziazione della sintassi. La libreria Prism.js risolve questo problema. Questa guida descrive come configurare Prism.js, includendo una soluzione automatica per i problemi di visualizzazione dei caratteri HTML < e >.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"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":[378],"tags":[420],"class_list":["post-2460","post","type-post","status-publish","format-standard","hentry","category-cheat-sheets","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/2460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/comments?post=2460"}],"version-history":[{"count":0,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/2460\/revisions"}],"wp:attachment":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/media?parent=2460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/categories?post=2460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/tags?post=2460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}