{"id":69088,"date":"2023-05-17T14:21:56","date_gmt":"2023-05-17T13:21:56","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=69088&#038;preview=true&#038;preview_id=69088"},"modified":"2023-05-22T09:11:53","modified_gmt":"2023-05-22T08:11:53","slug":"mostrare-codice-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/","title":{"rendered":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)"},"content":{"rendered":"<p>Imparare a mostrare il codice in WordPress \u00e8 fondamentale per i blogger e i creatori di contenuti che pubblicano costantemente codice online per i propri lettori. Il <a href=\"https:\/\/kinsta.com\/it\/blog\/modificare-codice-wordpress\/\">codice informatico<\/a>, per sua stessa natura, mostra qualcosa di nuovo sul frontend di un sito web piuttosto che i tag, gli slash e le parentesi che si trovano all&#8217;interno degli snippet di codice.<\/p>\n<p>Questo, tuttavia, rappresenta un problema per chi scrive di sviluppo e design, in quanto \u00e8 necessario disporre di un modo per mostrare correttamente il codice senza che svolga il suo vero lavoro, come la creazione di un pulsante o l&#8217;aggiunta di uno stile a un blocco di paragrafi.<\/p>\n<p>In poche parole, se scrivete un post sul blog e inserite un esempio di snippet di codice, dovrete evitare che il codice funzioni davvero! In questo modo, i lettori potranno vedere il codice nella sua forma grezza, visualizzarlo in un blocco ben formattato e persino copiarne il contenuto per utilizzarlo nel loro lavoro di sviluppo.<\/p>\n<p>In questa guida vi mostreremo esattamente come mostrare il codice in WordPress (indipendentemente dal <a href=\"https:\/\/kinsta.com\/it\/blog\/come-personalizzare-il-vostro-tema-wordpress\/\">tema WordPress<\/a>) utilizzando diversi metodi e vi aiuteremo a decidere quale metodo \u00e8 pi\u00f9 adatto al vostro flusso di lavoro.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Cosa succede quando si aggiunge un codice regolare in WordPress?<\/h2>\n<p>Potreste chiedervi cosa succederebbe se scriveste del codice nell&#8217;editor visuale di WordPress. Dopotutto, dato che non state utilizzando gli editor di testo o di codice, il vostro snippet di codice non dovrebbe andare bene cos\u00ec?<\/p>\n<p>Probabilmente no.<\/p>\n\n<p>Ecco alcuni dei risultati insoliti che possono verificarsi:<\/p>\n<ul>\n<li>Il codice appare parzialmente, con parti di codice che vengono visualizzati nel frontend del post e altre che scompaiono. I visitatori avranno un&#8217;impressione poco professionale; ci\u00f2 significa che il vostro codice non \u00e8 accurato.<\/li>\n<li>Non compare affatto: il codice scompare completamente nel backend e non compare nel frontend del post.<\/li>\n<li>Si nota una formattazione strana, spesso non facile da usare o da pubblicare per il pubblico.<\/li>\n<li>Il codice pu\u00f2 essere visualizzato solo parzialmente<\/li>\n<\/ul>\n<p>Per illustrare un paio di questi risultati, utilizzeremo il seguente frammento di <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">codice HTML<\/a>:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.cities {\nbackground-color: green;\ncolor: white;\nborder: 4px solid black;\nmargin: 10px;\npadding: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Chicago&lt;\/h2&gt;\n&lt;p&gt;A nickname for Chicago is The City of Broad Shoulders.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Los Angeles&lt;\/h2&gt;\n&lt;p&gt;A nickname for Los Angeles is The City of Angels.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;New York&lt;\/h2&gt;\n&lt;p&gt;A nickname for New York is The Big Apple.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Questo particolare snippet di codice <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-html\/\">utilizza elementi di stile HTML<\/a> per produrre tre blocchi di contenuto verdi con intestazioni e paragrafi.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Cliccare per scrivere e mostrare codice WordPress\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Cliccare per scrivere codice<\/figcaption><\/figure>\n<p>Tuttavia, vorremmo visualizzare il codice <em>grezzo<\/em> in un post del blog, senza che venga effettivamente visualizzato in questi blocchi.<\/p>\n<p>Ecco i risultati se incolliamo il codice direttamente nell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor dei blocchi Gutenberg<\/a> in WordPress:<\/p>\n<figure id=\"attachment_151527\" aria-describedby=\"caption-attachment-151527\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gutenberg-Editor-results-from-HTML-code.jpg\" alt=\"Risultati di Gutenberg per mostrare codice WordPress\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Risultati nell&#8217;editor Gutenberg dal codice HTML<\/figcaption><\/figure>\n<p>Come vedete, WordPress cerca di utilizzare il codice per il suo scopo principale: generare contenuti &#8211; tuttavia priva il codice del suo stile, quindi non fornisce il risultato che volevamo mostrare ai lettori.<\/p>\n<p>Per evitare situazioni come questa, vi invitiamo a utilizzare uno dei metodi di visualizzazione del codice elencati di seguito.<\/p>\n<h2>Come mostrare il codice sul sito WordPress (6 metodi)<\/h2>\n<p>Questi metodi sono elencati dal pi\u00f9 facile al pi\u00f9 difficile, e abbiamo alcuni metodi speciali per coloro che amano scrivere codice e contenuti in editor markdown (al contrario di WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Metodo 1: Utilizzare l&#8217;editor dei blocchi Gutenberg (predefinito)<\/h3>\n<p>Per esercitarvi a mostrare il codice in WordPress, potete utilizzare il seguente snippet di codice, che <a href=\"https:\/\/kinsta.com\/it\/blog\/imparare-html\/\">utilizza l&#8217;HTML<\/a> e il CSS interno per produrre un semplice risultato con un&#8217;intestazione blu e un paragrafo nero:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {background-color: beige;}\nh1 {color: blue;}\np {color: black;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Fun Facts About Otters&lt;\/h1&gt;\n&lt;p&gt;A group of otters in water is called a \"raft,\" since they all link arms to prevent from floating away.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Quando viene messo in funzione, il codice mostra questo nel frontend:<\/p>\n<figure id=\"attachment_151528\" aria-describedby=\"caption-attachment-151528\" style=\"width: 979px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/html-code-rendering-fun-facts-about-otters.jpg\" alt=\"Codice HTML che mostra fatti divertenti sulle lontre\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">I risultati mostrano un titolo e un corpo del testo con lo stile applicato<\/figcaption><\/figure>\n<p>Ma seguendo questo tutorial imparerete a mostrare il codice grezzo, non quello che il codice dovrebbe mostrare sul frontend.<\/p>\n<h4>Passo 1: Aggiungere un blocco di codice in WordPress<\/h4>\n<p>L&#8217;editor di WordPress Gutenberg dispone gi\u00e0 di un blocco Codice integrato, che vi permette di visualizzare frammenti di codice senza perdere la formattazione o attivare effettivamente il codice.<\/p>\n<p>Per iniziare, aprite un <a href=\"https:\/\/kinsta.com\/it\/blog\/trovare-id-post-wordpress\/\">post o una pagina<\/a> di WordPress e cliccate su uno dei pulsanti <strong>Aggiungi blocco<\/strong>.<\/p>\n<figure id=\"attachment_151529\" aria-describedby=\"caption-attachment-151529\" style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151529\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/add-block-buttons.jpg\" alt=\"Pulsanti Aggiungi blocco\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Pulsanti Aggiungi blocco<\/figcaption><\/figure>\n<p>Fate clic su uno dei pulsanti Aggiungi blocco<\/p>\n<p>In questo modo viene visualizzata la raccolta di blocchi disponibili. Potete cercare il blocco Codice o digitare una parola chiave come &#8220;codice&#8221; nella barra di ricerca.<\/p>\n<p>Una volta trovato il blocco <strong>Codice<\/strong> (con le icone delle parentesi), cliccateci sopra per inserire un pezzo di codice nel post.<\/p>\n<figure id=\"attachment_151530\" aria-describedby=\"caption-attachment-151530\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151530\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/popup-window-to-add-a-block-with-Code-block-option.jpg\" alt=\"Finestra popup per aggiungere un blocco, con l'opzione Blocco codice\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Finestra popup per aggiungere un blocco, con l&#8217;opzione Blocco codice<\/figcaption><\/figure>\n<p>Ora dovreste vedere un campo con il suggerimento <strong>&#8220;Scrivi codice&#8230;&#8221;<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151531\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Clicca per scrivere codice\" width=\"937\" height=\"437\"><\/p>\n<p>L&#8217;editor di WordPress Gutenberg supporta il markdown, quindi potete anche trovare e inserire il blocco Codice digitando uno slash (<code>\/<\/code>) nell&#8217;editor, quindi iniziare a scrivere &#8220;C&#8221; o &#8220;Codice&#8221;. WordPress mostrer\u00e0 tutti i blocchi pertinenti, offrendovi un modo pi\u00f9 veloce per inserirli.<\/p>\n<p>\u00c8 facile confondere il blocco Codice e il blocco HTML personalizzato. Tuttavia, il blocco HTML personalizzato serve per aggiungere HTML personalizzato da rendere sul frontend, non per aggiungere codice grezzo da visualizzare.<\/p>\n<figure id=\"attachment_151532\" aria-describedby=\"caption-attachment-151532\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151532\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/using-markdown-to-call-the-Code-block.jpg\" alt=\"Usare il markdown per richiamare il blocco Codice\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Usare il markdown per richiamare il blocco Codice<\/figcaption><\/figure>\n<h4>Passo 2: Incollare il codice di visualizzazione nel campo del blocco Codice<\/h4>\n<p>Ora \u00e8 il momento di copiare il codice che desiderate mostrare e incollarlo nel campo <strong>&#8220;Scrivi codice&#8230;&#8221;<\/strong>.<\/p>\n<figure id=\"attachment_151533\" aria-describedby=\"caption-attachment-151533\" style=\"width: 936px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151533\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Write-or-Paste-in-Code-to-Display.jpg\" alt=\"Scrivere o incollare il codice da visualizzare\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Scrivere o incollare il codice da visualizzare<\/figcaption><\/figure>\n<p>Il codice appare ora all&#8217;interno del riquadro.<\/p>\n<p>Il bello del blocco Codice \u00e8 che rispetta tutti gli spazi e le tabulazioni gi\u00e0 presenti all&#8217;interno del frammento di codice. Di conseguenza, non dovrebbe avere un aspetto diverso da quello della fonte da cui l&#8217;avete copiato.<\/p>\n<figure id=\"attachment_151534\" aria-describedby=\"caption-attachment-151534\" style=\"width: 919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151534 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Pasted-Snippet-in-the-Code-Block.jpg\" alt=\"Snippet incollato nel blocco codice per mostrare il codice di WordPress\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Snippet incollato nel blocco Codice<\/figcaption><\/figure>\n<h4>Passo 3: Pubblicare e visualizzare i risultati<\/h4>\n<p>Per visualizzare il codice sul post o pagina di WordPress, terminate il processo cliccando sul pulsante <strong>Pubblica<\/strong>.<\/p>\n<p>Potete anche farvi un&#8217;idea dell&#8217;aspetto del codice prima di pubblicarlo selezionando <strong>Anteprima<\/strong>.<\/p>\n<figure id=\"attachment_151535\" aria-describedby=\"caption-attachment-151535\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151535 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish.jpg\" alt=\"Cliccare su Pubblica per mostrare il codice WordPress\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Cliccare su Pubblica<\/figcaption><\/figure>\n<p>Dopo aver premuto il pulsante <strong>Pubblica<\/strong>, visitate la versione live del post per verificare che il pezzo di codice venga visualizzato come codice grezzo.<\/p>\n<p>Come vedete, il blocco Codice \u00e8 piuttosto semplice, ma fornisce le funzionalit\u00e0 necessarie per mantenere la formattazione durante la pubblicazione del codice nei post del blog.<\/p>\n<p>Date un&#8217;occhiata alla schermata seguente. Nel nostro esempio, non \u00e8 cambiato nulla rispetto al frammento di codice originale; \u00e8 stato semplicemente presentato nel frontend in un riquadro grigio.<\/p>\n<figure id=\"attachment_151536\" aria-describedby=\"caption-attachment-151536\" style=\"width: 1031px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151536 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/grey-box.jpg\" alt=\"Codice WordPress visualizzato nel frontend\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">Codice visualizzato nel frontend<\/figcaption><\/figure>\n<h4>Passo 4: Considerare la formattazione del blocco di codice<\/h4>\n<p>Per far risaltare un po&#8217; il blocco Codice, potreste provare a modificarne l&#8217;aspetto rispetto a quello predefinito.<\/p>\n<p>Per scoprire le opzioni di stile del blocco, selezionate il blocco <strong>Codice<\/strong>, quindi scegliete il pulsante <strong>Impostazioni<\/strong> (icona dell&#8217;ingranaggio). In questo modo si apre la scheda <strong>Blocco<\/strong>, che mostra solo le impostazioni del blocco selezionato, in questo caso il blocco Codice.<\/p>\n<figure id=\"attachment_151537\" aria-describedby=\"caption-attachment-151537\" style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151537 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Go-to-Block-Settings-for-Code-Formatting.jpg\" alt=\"Andare alle Impostazioni del blocco per la formattazione del codice e per visualizzare codice in WordPress\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">Andare alle impostazioni del blocco per la formattazione del codice<\/figcaption><\/figure>\n<p>\u00c8 possibile modificare lo stile del blocco Codice come si vuole, con opzioni per modificare i colori del testo e dello sfondo.<\/p>\n<figure id=\"attachment_151538\" aria-describedby=\"caption-attachment-151538\" style=\"width: 1044px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151538\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Edit-Color-and-Background-Settings.jpg\" alt=\"Modificare le impostazioni di colore e sfondo\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Modificare le impostazioni di colore e sfondo<\/figcaption><\/figure>\n<p>Potete anche:<\/p>\n<ul>\n<li>Modificare le dimensioni del testo<\/li>\n<li>Aggiungere padding e margini alla casella di codice<\/li>\n<li>Includere un bordo con una larghezza e un colore personalizzati<\/li>\n<\/ul>\n<figure id=\"attachment_151539\" aria-describedby=\"caption-attachment-151539\" style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151539\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Settings-for-size-dimensions-and-border.jpg\" alt=\"Impostazioni per grandezza, dimensioni e bordo\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Impostazioni per grandezza, dimensioni e bordo<\/figcaption><\/figure>\n<p>Come sempre, cliccate sul pulsante <strong>Pubblica<\/strong> quando avrete finito di modificare il blocco, quindi visualizzate i risultati nel frontend del vostro <a href=\"https:\/\/kinsta.com\/it\/blog\/custom-post-type-wordpress\/\">post WordPress<\/a>.<\/p>\n<figure id=\"attachment_151540\" aria-describedby=\"caption-attachment-151540\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151540 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Frontend-Results.jpg\" alt=\"Risultati del frontend per mostrare codice WordPress\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Risultati del frontend<\/figcaption><\/figure>\n<h3>Metodo 2: Utilizzare un plugin<\/h3>\n<p>Un altro modo per visualizzare il codice su WordPress \u00e8 quello di <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-i-plugin-di-wordpress\/\">installare un plugin<\/a>.<\/p>\n<p>Questo metodo pu\u00f2 sembrare un po&#8217; superfluo visto che WordPress ha gi\u00e0 un blocco codice integrato, ma alcuni plugin offrono funzionalit\u00e0 aggiuntive e strumenti di formattazione che ne rendono utile l&#8217;utilizzo. In breve, potete rendere i vostri blocchi di codice pi\u00f9 belli di quelli che otterreste con il blocco Codice standard di Gutenberg.<\/p>\n<p>Inoltre, alcuni utenti dell&#8217;editor classico di WordPress potrebbero trovare pi\u00f9 semplice lavorare con un plugin, poich\u00e9 \u00e8 un po&#8217; pi\u00f9 difficile visualizzare il codice nell&#8217;editor classico.<\/p>\n<p>Per iniziare, dovete scegliere un plugin &#8220;evidenziatore di sintassi&#8221;, che \u00e8 un modo elegante per dire che il plugin evidenzier\u00e0 il codice sorgente e ne manterr\u00e0 intatta la formattazione.<\/p>\n<p>Ecco alcuni plugin affidabili per visualizzare il codice su WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlighter<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">SyntaxHighlighter Evolved<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/code-prettify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Prettify<\/a><\/li>\n<\/ul>\n<p>In questo tutorial utilizzeremo il plugin Enlighter perch\u00e9 offre opzioni per etichettare i tipi di codice da visualizzare nelle caselle di codice, oltre a molte altre funzioni di stile. Se preferite, potete provare gli altri, in quanto fanno tutti la stessa cosa.<\/p>\n<h4>Passo 1: Installare un plugin per l&#8217;evidenziazione della sintassi<\/h4>\n<p>Installate il plugin Enlighter &#8211; Customizable Syntax Highlighte sul vostro sito WordPress utilizzando il <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-i-plugin-di-wordpress\/\">metodo di installazione dei plugin<\/a> che preferite.<\/p>\n<p>Dopo l&#8217;attivazione, il plugin \u00e8 pronto per inserire il codice in qualsiasi post\/pagina con un blocco Gutenberg o un pulsante <strong>Inserisci<\/strong> dell&#8217;editor classico.<\/p>\n<figure id=\"attachment_151541\" aria-describedby=\"caption-attachment-151541\" style=\"width: 945px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151541 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/The-Enlighter-Plugin.jpg\" alt=\"Il plugin Enlighter per visualizzare il codice di WordPress\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">Il plugin Enlighter<\/figcaption><\/figure>\n<h4>Passo 2: Inserire il blocco Enlighter Sourcecode in un post<\/h4>\n<p>Se state utilizzando l&#8217;editor di blocchi di WordPress Gutenberg, aprite un post in cui desiderate visualizzare il codice. Cliccate su uno dei pulsanti <strong>Aggiungi blocco<\/strong> (icona +) per visualizzare la raccolta di blocchi disponibili.<\/p>\n<p>Sfogliate o digitate una parola chiave per il blocco <strong>Enlighten Sourcecode<\/strong>. Cliccate sul blocco per inserirlo nel post.<\/p>\n<figure id=\"attachment_151542\" aria-describedby=\"caption-attachment-151542\" style=\"width: 997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151542 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Enlighter-Sourcecode-Block.jpg\" alt=\"Blocco Enlighter Sourcecode per visualizzare il codice di WordPress\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Blocco Enlighter Sourcecode<\/figcaption><\/figure>\n<h4>Passo 3: Incollare il codice nel blocco Syntax Highlighter<\/h4>\n<p>Il blocco <strong>Enlighter Highlighter<\/strong> viene visualizzato nell&#8217;Editor blocchi, con un titolo <strong>&#8220;Generic Highlighting&#8221;<\/strong> e un campo <strong>&#8220;Insert Sourcecode\u2026&#8221;<\/strong>.<\/p>\n<p>Prendete il codice che desiderate mostrare su WordPress e incollatelo o digitatelo nel campo <strong>&#8220;Insert Sourcecode\u2026&#8221;<\/strong>.<\/p>\n<figure id=\"attachment_151543\" aria-describedby=\"caption-attachment-151543\" style=\"width: 1022px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151543\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Use-the-Insert-Sourcecode-Field.jpg\" alt=\"Usare il campo Inserisci codice sorgente\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Usare il campo Insert Sourcecode\u2026<\/figcaption><\/figure>\n<p>Come evidenziatore di sintassi, il plugin conserva tutte le scelte di formattazione e le schede. Quando sarete soddisfatti del risultato, cliccate sul pulsante <strong>Pubblica<\/strong>.<\/p>\n<figure id=\"attachment_151544\" aria-describedby=\"caption-attachment-151544\" style=\"width: 991px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151544 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish-1.jpg\" alt=\"Fare clic su Pubblica per visualizzare il codice di WordPress\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Cliccare su Pubblica<\/figcaption><\/figure>\n<h4>Passo 4: Anteprima del codice nel frontend<\/h4>\n<p>A questo punto potete visualizzare il frontend del vostro post per vedere cosa vedono i visitatori del sito.<\/p>\n<p>Il plugin Enlighter offre un tema di default minimalista per la visualizzazione del codice, con numeri di riga per aiutare l&#8217;organizzazione e i riferimenti.<\/p>\n<figure id=\"attachment_151545\" aria-describedby=\"caption-attachment-151545\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151545 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.95cce0abcfa2479e9089506a78f9c684.jpg\" alt=\"Visualizzare il codice WordPress sul frontend\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Visualizzato nel frontend<\/figcaption><\/figure>\n<p>Come abbiamo detto, l&#8217;utilizzo di un plugin per visualizzare il codice su WordPress ha i suoi vantaggi rispetto agli altri metodi. Ad esempio, la versione frontend del plugin per la sintassi Enlighter evidenzia le righe quando l&#8217;utente scorre il codice.<\/p>\n<figure id=\"attachment_151546\" aria-describedby=\"caption-attachment-151546\" style=\"width: 1035px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151546\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ffec66ab73594f6a8fcfd86328515232.jpg\" alt=\"Righe di codice evidenziate\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Righe di codice evidenziate<\/figcaption><\/figure>\n<p>Ci sono anche diversi pulsanti nell&#8217;angolo superiore destro del riquadro del codice, tra cui uno che presenta il codice in testo semplice, senza i numeri di riga.<\/p>\n<figure id=\"attachment_151547\" aria-describedby=\"caption-attachment-151547\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151547\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.00b5c3fcfa414d76ae68c0827cb2228c.jpg\" alt=\"Pulsante Testo semplice\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Pulsante Testo semplice<\/figcaption><\/figure>\n<p>Il secondo pulsante si chiama <strong>Copy To Clipboard<\/strong> e copia istantaneamente tutto ci\u00f2 che si trova all&#8217;interno del riquadro del codice negli appunti dell&#8217;utente, che pu\u00f2 prenderlo e incollarlo in qualsiasi programma.<\/p>\n<figure id=\"attachment_151548\" aria-describedby=\"caption-attachment-151548\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151548\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6c9ec9750eef4aecbfceee51a4af1cc0.jpg\" alt=\"Pulsante Copy To Clipboard\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Pulsante Copy To Clipboard<\/figcaption><\/figure>\n<p>Infine, il terzo pulsante apre il codice in una nuova finestra, presentandolo in una versione di testo semplice della finestra del browser.<\/p>\n<figure id=\"attachment_151549\" aria-describedby=\"caption-attachment-151549\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151549\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.777ac0e80acf4dcbb66107daddf8a3b7.jpg\" alt=\"Aprire il codice in una nuova finestra\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">Aprire il codice in una nuova finestra<\/figcaption><\/figure>\n<h4>Passo 5: Impostazione della lingua e delle linee per la casella del codice<\/h4>\n<p>Il plugin Enlighter \u00e8 dotato di vari temi e di potenti strumenti di personalizzazione che permettono di dare alla casella del codice l&#8217;aspetto che desiderate. Se preferite non utilizzare il tema predefinito, tornate al post su WordPress e cliccate sul blocco <strong>Enlighter Sourcecode<\/strong> attualmente aperto.<\/p>\n<p>In questo modo verr\u00e0 visualizzata la barra laterale del <strong>blocco<\/strong> in WordPress. Se non appare, assicuratevi di cliccare sul pulsante <strong>Impostazioni<\/strong> (icona a forma di ingranaggio) nell&#8217;angolo in alto a destra della finestra di WordPress.<\/p>\n<p>La prima impostazione da personalizzare \u00e8 il campo <strong>Language<\/strong>: questo indica al plugin il linguaggio del codice da visualizzare in modo che possa offrire la formattazione e l&#8217;evidenziazione corretta.<\/p>\n<figure id=\"attachment_151550\" aria-describedby=\"caption-attachment-151550\" style=\"width: 1148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151550\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.f2c13dad8c56496597ac3b6a7c51be2c.jpg\" alt=\"Campo Language\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Campo Language<\/figcaption><\/figure>\n<p>Ci sono diversi linguaggi di codifica tra cui scegliere, quindi scorrete l&#8217;elenco e scegliete quello pi\u00f9 appropriato.<\/p>\n<figure id=\"attachment_151551\" aria-describedby=\"caption-attachment-151551\" style=\"width: 1171px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151551\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4e8a9a6a7c984e20b6bb154e04f75987.jpg\" alt=\"Scegliere il linguaggio\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Scegliere il linguaggio<\/figcaption><\/figure>\n<p>Il campo <strong>Speciallines<\/strong> evidenzia le righe che specificherete. Per farlo, digitate i numeri delle righe separati da virgole.<\/p>\n<figure id=\"attachment_151552\" aria-describedby=\"caption-attachment-151552\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151552\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.17f5c662bffd4955a719bcd12d1afc82.jpg\" alt=\"Special lines\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">Campo Special lines<\/figcaption><\/figure>\n<p>Di conseguenza, i visitatori del sito vedranno evidenziate tutte le righe che avrete specificato.<\/p>\n<figure id=\"attachment_151553\" aria-describedby=\"caption-attachment-151553\" style=\"width: 982px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151553\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.26424dd29a524fb5bb4e898efbc65609.jpg\" alt=\"Righe evidenziate nel frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Righe evidenziate nel frontend<\/figcaption><\/figure>\n<p>Il campo <strong>Lineoffset<\/strong> \u00e8 un modo per far iniziare il vostro snippet di codice da una riga numerata specifica, il che \u00e8 utile se state mostrando solo un sottoinsieme di codice che fa parte di una raccolta pi\u00f9 ampia di righe.<\/p>\n<figure id=\"attachment_151554\" aria-describedby=\"caption-attachment-151554\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151554\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2fcdd0028fa949ba9294eeb90fee1f99.jpg\" alt=\"Campo Lineoffset\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Campo Lineoffset<\/figcaption><\/figure>\n<p>Come vedete, digitando 10 nel campo <strong>Lineoffset<\/strong>, l&#8217;intero riquadro di codice inizia al numero 10.<\/p>\n<figure id=\"attachment_151555\" aria-describedby=\"caption-attachment-151555\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151555\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.29b010d935744289aac79f10b3b2eaf4.jpg\" alt=\"Far iniziare il documento da una riga specifica\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Far iniziare il documento da una riga specifica<\/figcaption><\/figure>\n<h4>Passo 6: Scegliere un tema<\/h4>\n<p>Il tema Enlighter \u00e8 il tema predefinito di questo plugin. Tuttavia, il campo <strong>Theme<\/strong> (sempre sotto il pannello delle impostazioni del blocco) presenta un&#8217;ampia gamma di temi integrati da scegliere.<\/p>\n<figure id=\"attachment_151556\" aria-describedby=\"caption-attachment-151556\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151556\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a6632b4168ee44ef843640a71644257f.jpg\" alt=\"Opzioni del tema\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Opzioni del tema<\/figcaption><\/figure>\n<p>Ad esempio, il tema Godzilla mostra il codice come se fosse su un foglio di carta millimetrata o da disegno.<\/p>\n<figure id=\"attachment_151557\" aria-describedby=\"caption-attachment-151557\" style=\"width: 1007px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151557\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ee85f0bb69e84d96a03ac4d623fd3453.jpg\" alt=\"Il tema Godzilla\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">Il tema Godzilla<\/figcaption><\/figure>\n<p>Il tema Atomic, invece, cambia lo sfondo in un tema scuro e offre un testo prevalentemente bianco e una colorazione rosa per i tag del codice.<\/p>\n<figure id=\"attachment_151558\" aria-describedby=\"caption-attachment-151558\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151558\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ebf289e0059f4ac5a19fcfb6c2bfb589.jpg\" alt=\"Tema Atomic\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Tema Atomic<\/figcaption><\/figure>\n<p>Un altro esempio \u00e8 il tema Classic, che \u00e8 una versione meno minimalista del tema Enlighter con colori pi\u00f9 vivaci e linee pi\u00f9 definite.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151559\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Tema Classic\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Tema Classic<\/figcaption><\/figure>\n<h4>Passo 7: Considerare la possibilit\u00e0 di creare un tema personalizzato<\/h4>\n<p>Il plugin Enlighter offre una scheda all&#8217;interno della <a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">bacheca di WordPress<\/a> per personalizzare ogni aspetto del plugin e delle sue funzioni di evidenziazione.<\/p>\n<p>Per avere il pieno controllo sul design e sulla visualizzazione delle caselle di codice, andate alla scheda <strong>Enlighter<\/strong> (icona &lt;&gt;), quindi scegliete <strong>Appearance<\/strong> o <strong>Theme Customizer<\/strong>.<\/p>\n<figure id=\"attachment_151560\" aria-describedby=\"caption-attachment-151560\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151560\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.dae7a301ff6c4263b7608ef0fa6d8266.jpg\" alt=\"Theme Customizer\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Theme Customizer<\/figcaption><\/figure>\n<p>La scheda <strong>Appearance<\/strong> vi permette di scegliere un tema standard e di regolare elementi quali:<\/p>\n<ul>\n<li>Indentazione del codice<\/li>\n<li>Sovrapposizione del testo<\/li>\n<li>Numerazione<\/li>\n<li>Effetto line-hover<\/li>\n<li>Codice RAW su doppio clic<\/li>\n<\/ul>\n<figure id=\"attachment_151561\" aria-describedby=\"caption-attachment-151561\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151561\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.abcba1aae5c04c278f1b59b5768b3aa3.jpg\" alt=\"Sezione Appearance del Theme Customizer\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Sezione Appearance del Theme Customizer<\/figcaption><\/figure>\n<p>La sezione <strong>Theme Customizer<\/strong> include un lungo elenco di schede per creare un tema per l&#8217;evidenziatore di codice da zero, con opzioni per regolare pulsanti, espressioni, linguaggi e altro ancora.<\/p>\n<figure id=\"attachment_151562\" aria-describedby=\"caption-attachment-151562\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151562\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e9cf6edb95b34a5ebb1771e2491ad782.jpg\" alt=\"Impostazioni aggiuntive\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Impostazioni aggiuntive<\/figcaption><\/figure>\n<h4>Bonus: usare Enlighter con l&#8217;editor classico<\/h4>\n<p>Il plugin Enlighter funziona in modo leggermente diverso per chi utilizza ancora l&#8217;editor classico di WordPress.<\/p>\n<p>Una volta installato il plugin Enlighter, andate su qualsiasi post o pagina e cercate il pulsante <strong>Enlighter Code Insert<\/strong> nel pannello di controllo dell&#8217;editor.<\/p>\n<figure id=\"attachment_151563\" aria-describedby=\"caption-attachment-151563\" style=\"width: 969px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151563\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.58a5cf5f681c4e638286491be211f678.jpg\" alt=\"Enlighter Code Insert\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Enlighter Code Insert<\/figcaption><\/figure>\n<p>Si apre una nuova finestra chiamata <strong>Enlighter Code Insert<\/strong>.<\/p>\n<p>Incollate il codice che volete visualizzare nel campo grande (senza etichetta) in basso.<\/p>\n<figure id=\"attachment_151564\" aria-describedby=\"caption-attachment-151564\" style=\"width: 985px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151564\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.169682da2f0f4a80b61a2e195331cedf.jpg\" alt=\"Incollare il codice\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Incollare il codice<\/figcaption><\/figure>\n<p>Cliccate sul menu a tendina del campo <strong>Language<\/strong> per selezionare il linguaggio di codifica corretto.<\/p>\n<figure id=\"attachment_151565\" aria-describedby=\"caption-attachment-151565\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151565\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a9bc4bc75c3941d0a18f51012154c107.jpg\" alt=\"Scegliere un un linguaggio\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">Scegliere un un linguaggio<\/figcaption><\/figure>\n<p>Una volta terminato, cliccate sul pulsante <strong>OK<\/strong>. \u00c8 anche possibile modificare le altre caratteristiche di questa finestra, come ad esempio aggiungere l&#8217;indentazione delle righe.<\/p>\n<figure id=\"attachment_151566\" aria-describedby=\"caption-attachment-151566\" style=\"width: 980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151566\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.34dcd4d4658c4c5b849bbc0271526d65.jpg\" alt=\"Esempio di indentazione di riga\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Esempio di indentazione di riga<\/figcaption><\/figure>\n<p>Cliccate sul pulsante <strong>Pubblica<\/strong> per il post e visualizzate i risultati sul frontend. Il riquadro del codice predefinito per l&#8217;Editor classico \u00e8 un tema scuro, ma potete modificare l&#8217;aspetto del riquadro del codice e persino creare dei temi personalizzati.<\/p>\n<figure id=\"attachment_151567\" aria-describedby=\"caption-attachment-151567\" style=\"width: 922px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151567 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3a8933d9ff7049568e8e0145998c0410.jpg\" alt=\"Versione pubblicata\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Versione pubblicata<\/figcaption><\/figure>\n<h3>Metodo 3: Utilizzare uno strumento di codifica<\/h3>\n<p>Gli strumenti di codifica rappresentano un&#8217;opzione alternativa quando si cerca di mostrare il codice in WordPress, soprattutto se non si ha intenzione di farlo spesso (e si preferisce evitare di utilizzare un plugin).<\/p>\n<p>Gli encoder HTML preservano l&#8217;integrit\u00e0 dei formati di codice, in particolare quelli con caratteri speciali e tabulazioni. Gli encoder sono in grado di gestire tutti i tipi di codice, ma poi traducono il codice inserito in un codice pronto per l&#8217;HTML, facile da incollare in WordPress.<\/p>\n<p>Non esistono strumenti di codifica affidabili come plugin, ma molti sono offerti come applicazioni web gratuite di terze parti. Tenete presente che gli strumenti di codifica non offrono alcuno strumento di styling, quindi riceverete solo il codice cos\u00ec come deve essere visualizzato (niente box fantasiosi o funzioni di personalizzazione delle righe).<\/p>\n<p>Alcuni strumenti di codifica affidabili sono:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3docs.com\/tools\/html-encoder\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3Docs HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.opinionatedgeek.com\/codecs\/htmlencoder\" target=\"_blank\" rel=\"noopener noreferrer\">Opinionated Geek HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.web2generators.com\/html-based-tools\/online-html-entities-encoder-and-decoder\" target=\"_blank\" rel=\"noopener noreferrer\">Web2Generators HTML Encoder e Decoder<\/a><\/li>\n<\/ul>\n<p>In base ai nostri test, lo strumento di codifica pi\u00f9 efficace \u00e8 W3Docs HTML Encoder, quindi lo utilizzeremo per questo tutorial.<\/p>\n<h4>Passo 1: Aprire l&#8217;encoder e scegliere le impostazioni<\/h4>\n<p>Andate sul sito web di W3Docs HTML Encoder.<\/p>\n<p>La pagina mostra due campi affiancati. Quello a sinistra \u00e8 il campo in cui incollare il codice. Quello a destra mostra la versione codificata da copiare e incollare in WordPress.<\/p>\n<p>Tuttavia, dovete prima stabilire quale tipo di codice volete conservare:<\/p>\n<ul>\n<li>Scegliete l&#8217;<strong>unicode JavaScript<\/strong> se incollate codice con elementi JavaScript.<\/li>\n<li>Scegliete i <strong>simboli HTML<\/strong> se usate l&#8217;HTML.<\/li>\n<\/ul>\n<figure id=\"attachment_151568\" aria-describedby=\"caption-attachment-151568\" style=\"width: 1155px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151568\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b4cf25bd90b44faea5a06da55310d33a.jpg\" alt=\"Scegliere i simboli HTML\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">Scegliere i simboli HTML<\/figcaption><\/figure>\n<h4>Passo 2: Incollare e cliccare per codificare<\/h4>\n<p>Incollate il codice che volete visualizzare in WordPress nel campo a sinistra. Poi cercate e cliccate sul pulsante <strong>Encode<\/strong> in alto a destra.<\/p>\n<figure id=\"attachment_151569\" aria-describedby=\"caption-attachment-151569\" style=\"width: 1147px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151569\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.be543787ffbc49ea966242ac15528658.jpg\" alt=\"Cliccare per codificare\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Cliccare per codificare<\/figcaption><\/figure>\n<h4>Passo 3: Copiare il risultato decodificato<\/h4>\n<p>Il prodotto finito pu\u00f2 sembrare confuso, ma in realt\u00e0 \u00e8 una combinazione di elementi HTML che preservano ogni aspetto del codice che avete inserito, senza che il codice si attivi e mostri qualcos&#8217;altro sul frontend.<\/p>\n<p>Cliccate sul pulsante <strong>Copy<\/strong>.<\/p>\n<figure id=\"attachment_151570\" aria-describedby=\"caption-attachment-151570\" style=\"width: 1156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151570\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4a0e251ebf094c2da66953dcbb53bbf2.jpg\" alt=\"Copiare il codice\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Copiare il codice<\/figcaption><\/figure>\n<h4>Passo 4: Incollare l&#8217;HTML codificato nell&#8217;editor di codice o di testo di WordPress<\/h4>\n<p>Tornate a WordPress e aprite il post o la pagina desiderata.<\/p>\n<p>Selezionate la voce di menu <strong>Opzioni<\/strong> (tre punti verticali) nell&#8217;angolo in alto a destra. Cliccate sull&#8217;opzione <strong>Editor di codice<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Evitate di utilizzare il blocco HTML personalizzato per questo processo, perch\u00e9 non sembra funzionare.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151571\" aria-describedby=\"caption-attachment-151571\" style=\"width: 1087px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151571\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4eb099a1c6eb417bb897b6a0eb5a333a.jpg\" alt=\"Andare al menu Opzioni\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">Andare al menu Opzioni<\/figcaption><\/figure>\n<p>Ora vedrete l&#8217;<strong>Editor di codice<\/strong> anzich\u00e9 l&#8217;Editor del blocco visivo. Cercate l&#8217;area in cui desiderate visualizzare il codice e incollate l&#8217;HTML codificato nell&#8217;editor.<\/p>\n<figure id=\"attachment_151572\" aria-describedby=\"caption-attachment-151572\" style=\"width: 901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151572\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5990861f47e46a3ab2b929258a7f630.jpg\" alt=\"Incollare l'HTML codificato\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Incollare l&#8217;HTML codificato<\/figcaption><\/figure>\n<p>Se state utilizzando l&#8217;editor classico di WordPress, dovete andare nella scheda Testo, che \u00e8 la stessa dell&#8217;editor del codice dell&#8217;editor dei blocchi di Gutenberg.<\/p>\n<figure id=\"attachment_151573\" aria-describedby=\"caption-attachment-151573\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151573\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b8d500e6d84b435a851a50cda8ea61c9.jpg\" alt=\"Scheda Testo\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Scheda Testo<\/figcaption><\/figure>\n<h4>Passo 5: Pubblicare e visualizzare il codice<\/h4>\n<p>Fate clic su <strong>Aggiorna<\/strong> o <strong>Pubblica<\/strong> per il post, quindi navigate nel frontend del post per visualizzarne l&#8217;aspetto.<\/p>\n<p>Dovreste vedere il codice originale che \u00e8 stato incollato nel codificatore, prima che lo strumento aggiungesse gli elementi di codifica HTML. Come gi\u00e0 detto, non ci sono funzioni di stile con i codificatori, quindi questo \u00e8 un ottimo metodo per ottenere un aspetto pulito e minimalista.<\/p>\n<figure id=\"attachment_151574\" aria-describedby=\"caption-attachment-151574\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151574\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.321fb9938cf84a1c8308d32fc211b121.jpg\" alt=\"Codice pubblicato\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">Codice pubblicato<\/figcaption><\/figure>\n<h3>Metodo 4: Utilizzare uno shortcode personalizzato<\/h3>\n<p>La <a href=\"https:\/\/kinsta.com\/it\/blog\/shortcode-wordpress\/\">creazione di uno shortcode personalizzato<\/a> consente di inserire pezzi di codice riutilizzabili senza dover fare copia e incolla. Ecco perch\u00e9 gli shortcode personalizzati offrono una solida opportunit\u00e0 per visualizzare il codice su WordPress.<\/p>\n<p>Ecco i vantaggi dell&#8217;utilizzo di shortcode personalizzati per visualizzare il codice:<\/p>\n<ol>\n<li>Gli shortcode personalizzati permettono di salvare il codice complicato una volta e poi di riutilizzarlo, eliminando la necessit\u00e0 di digitare ogni volta frammenti di codice pi\u00f9 lunghi.<\/li>\n<li>Potete scrivere il vostro stile <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> per gli evidenziatori di codice e le caselle.<\/li>\n<li>Gli shortcode possono essere utilizzati da chiunque, quindi altri collaboratori possono sfruttare i vostri evidenziatori di codice e i vostri blocchi con un semplice clic.<\/li>\n<\/ol>\n<p>La creazione di uno shortcode personalizzato richiede esperienza nella modifica dei <a href=\"https:\/\/kinsta.com\/it\/blog\/come-funzionano-i-temi-di-wordpress\/#whats-inside-those-wordpress-files\">file dei temi di WordPress<\/a>, nel <a href=\"https:\/\/kinsta.com\/it\/blog\/editor-php\/\">lavoro con il codice PHP<\/a> e, potenzialmente, nella creazione di plugin WordPress. A causa di questi requisiti, creare uno shortcode personalizzato per WordPress pu\u00f2 essere difficile per chi \u00e8 alle prime armi con il PHP.<\/p>\n<p>Tuttavia, il risultato finale \u00e8 un modo molto pi\u00f9 semplice di visualizzare il codice su WordPress.<\/p>\n<figure id=\"attachment_151575\" aria-describedby=\"caption-attachment-151575\" style=\"width: 1558px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151575\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2e11bbe71e8244aaa8d5ecc5d61c3bab.jpg\" alt=\"Shortcode HTML\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">Shortcode HTML<\/figcaption><\/figure>\n<p>Potete chiamare lo shortcode personalizzato come volete e creare pi\u00f9 opzioni, come <code>[html] [\/html]<\/code> e <code>[css] [\/css]<\/code>, per diversi linguaggi di codifica.<\/p>\n<figure id=\"attachment_151576\" aria-describedby=\"caption-attachment-151576\" style=\"width: 1647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151576\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.85e96f67d4374def86be5d930973f276.jpg\" alt=\"Shortcode CSS\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">Shortcode CSS<\/figcaption><\/figure>\n<p>Tenete presente che gli shortcode personalizzati funzionano meglio per l&#8217;evidenziazione della sintassi quando si usa l&#8217;<strong>Editor di testo<\/strong> (in WordPress classico) o il box <strong>HTML personalizzato<\/strong> quando si lavora con l&#8217;Editor dei blocchi di WordPress Gutenberg.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il blocco Shortcode di Gutenberg \u00e8 un&#8217;opzione, ma durante i nostri test alcuni frammenti di codice hanno perso elementi di formattazione o caratteri chiave.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151577\" aria-describedby=\"caption-attachment-151577\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151577\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5305f76b1754513b54ee4fd2a41e41e.jpg\" alt=\"Editor di testo\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Editor di testo<\/figcaption><\/figure>\n<p>L&#8217;obiettivo \u00e8 quello di creare uno shortcode personalizzato in cui poter digitare o incollare il codice tra i tag di apertura e chiusura dello shortcode.<\/p>\n<figure id=\"attachment_151578\" aria-describedby=\"caption-attachment-151578\" style=\"width: 1487px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151578 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.557a5f43cf8d4950ac2bc4212f6aa73b.jpg\" alt=\"Codice incollato all'interno dello shortcode HTML per visualizzare il codice di WordPress\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">Codice incollato all&#8217;interno dello shortcode HTML<\/figcaption><\/figure>\n<p>Una volta pubblicato, le impostazioni di stile e di evidenziazione dello shortcode personalizzato vengono visualizzate nel frontend. Inoltre, il codice che avete aggiunto viene visualizzato correttamente nell&#8217;evidenziatore di sintassi.<\/p>\n<figure id=\"attachment_151579\" aria-describedby=\"caption-attachment-151579\" style=\"width: 1357px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151579 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.1123bc1ac4c34faab9809ce3826b2cc9.jpg\" alt=\"Vista frontend per visualizzare il codice di WordPress\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Vista del frontend<\/figcaption><\/figure>\n<h3>Metodo 5: Utilizzare i tag di <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code><\/h3>\n<p>Forse il metodo pi\u00f9 vecchio, ma ancora incredibilmente affidabile, per visualizzare il codice su WordPress \u00e8 quello di aggiungere semplicemente dei tag HTML specifici intorno al frammento di codice. Questo metodo \u00e8 pi\u00f9 indicato quando si lavora con l&#8217;editor classico di WordPress o con qualsiasi altro editor HTML.<\/p>\n<p>Ci sono due opzioni:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> tag:<\/strong> Ideale per visualizzare una breve riga di codice; spesso utilizzato all&#8217;interno di paragrafi<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> tag:<\/strong> Ideale per blocchi di codice pi\u00f9 lunghi o quando si desidera avere pi\u00f9 opzioni di formattazione<\/li>\n<\/ol>\n<h4>Opzione 1: Usare i tag <code>&lt;code&gt;<\/code> per gli snippet di codice in linea<\/h4>\n<p>I creatori di contenuti che scrivono di codice non sempre vogliono utilizzare blocchi di codice di grandi dimensioni. A volte \u00e8 pi\u00f9 sensato includere un breve frammento di codice all&#8217;interno di un paragrafo.<\/p>\n<p>Tuttavia, \u00e8 necessario evidenziare e preservare la formattazione del codice. Inoltre, alcuni codici possono causare problemi al contenuto circostante se non vengono conservati correttamente.<\/p>\n<figure id=\"attachment_151580\" aria-describedby=\"caption-attachment-151580\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151580 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.103e5a059b524aa0aa00957a007800de.jpg\" alt=\"Un tag &lt;br&gt;\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Un tag di interruzione<\/figcaption><\/figure>\n<p>Prendiamo ad esempio il tag <code>&lt;br&gt;<\/code>: senza il tag <code>&lt;code&gt;<\/code> aggiungerebbe semplicemente un&#8217;interruzione al paragrafo.<\/p>\n<figure id=\"attachment_151581\" aria-describedby=\"caption-attachment-151581\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a191cc69e4594c76acf394a546c9a1ed.jpg\" alt=\"Un'interruzione indesiderata\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Un&#8217;interruzione indesiderata<\/figcaption><\/figure>\n<p>Inserendo la codifica all&#8217;interno di questi tag si ottiene un risultato molto pi\u00f9 pulito:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>Per farlo, aprite un post di WordPress e attivate l&#8217;<strong>editor di codice<\/strong> (per l&#8217;editor dei blocchi di Gutenberg) o l&#8217;<strong>editor di testo<\/strong> (se usate WordPress classico).<\/p>\n<p>Incollate o scrivete questi tag da qualche parte nell&#8217;editor; non inserite ancora il codice che volete visualizzare. Aggiungete invece uno spazio tra i tag.<\/p>\n<p><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/p>\n<figure id=\"attachment_151582\" aria-describedby=\"caption-attachment-151582\" style=\"width: 1111px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151582\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e37032a750ae40dbb0bae105f49375bc.jpg\" alt=\"Spazio tra i tag del codice\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Spazio tra i tag del codice<\/figcaption><\/figure>\n<p>Passate all&#8217;<strong>editor visuale<\/strong> (indipendentemente dal fatto che siate in Gutenberg o in WordPress classico).<\/p>\n<p>Vedrete un piccolo spazio grigio all&#8217;interno del contenuto visivo. Fate clic per posizionare il cursore all&#8217;interno di questo spazio grigio. \u00c8 qui che potete incollare o digitare il codice da visualizzare.<\/p>\n<figure id=\"attachment_151583\" aria-describedby=\"caption-attachment-151583\" style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.749a378741b34258a4a3c94dcd4e5455.jpg\" alt=\"Spazio grigio per scrivere il codice WordPress\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Spazio grigio per scrivere il codice<\/figcaption><\/figure>\n<p>Man mano che scrivete, lo spazio grigio si espander\u00e0 per accogliere lo snippet di codice. Cliccate sul pulsante <strong>Pubblica<\/strong> o <strong>Aggiorna<\/strong> per quel post.<\/p>\n<figure id=\"attachment_151584\" aria-describedby=\"caption-attachment-151584\" style=\"width: 1019px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151584\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.132a0f507095471dbc4bf516bba70787.jpg\" alt=\"Digitare il codice nello spazio grigio\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Digitare il codice nello spazio grigio<\/figcaption><\/figure>\n<p>Nel frontend del post, ora vedrete il codice salvato come dovrebbe essere e senza alcuna anomalia (come l&#8217;aggiunta di un&#8217;interruzione al contenuto).<\/p>\n<figure id=\"attachment_151585\" aria-describedby=\"caption-attachment-151585\" style=\"width: 1163px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151585\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3034b84bc11f4511b65cb87a74b4e92d.jpg\" alt=\"Il tag break viene visualizzato senza che venga effettivamente aggiunta un'interruzione\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">Il tag break viene visualizzato senza che venga effettivamente aggiunta un&#8217;interruzione<\/figcaption><\/figure>\n<p>La formattazione di questi tag di <code>&lt;code&gt;<\/code> \u00e8 solitamente scarna, ma spesso dipende dallo stile del tema. Ad esempio, il nostro esempio cambia solo il carattere ma non include uno sfondo grigio.<\/p>\n<h4>Opzione 2: Usare i tag <code>&lt;pre&gt;<\/code> per i blocchi di codice pi\u00f9 lunghi<\/h4>\n<p>I frammenti di codice pi\u00f9 lunghi meritano un blocco a s\u00e9 stante, separato dal contenuto che state scrivendo in paragrafi. Per questi ultimi, vi consigliamo di utilizzare i tag <code>&lt;pre&gt;<\/code>.<\/p>\n<p>Il processo di aggiunta di un tag <code>&lt;pre&gt;<\/code> \u00e8 identico a quello dei tag <code>&lt;code&gt;<\/code>, ma avrete pi\u00f9 spazio a disposizione per inserire il codice.<\/p>\n<p>Andate su un post e aprite l&#8217;editor <strong>Codice<\/strong> (Gutenberg) o <strong>Testo<\/strong> (WordPress classico). Incollate o scrivete il codice che desiderate visualizzare. Poi, circondate il codice con questi tag:<\/p>\n<p><code>&lt;pre&gt; &lt;\/pre&gt;<\/code><\/p>\n<figure id=\"attachment_151586\" aria-describedby=\"caption-attachment-151586\" style=\"width: 1099px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.d24206ad63c045479f1ad67aa2e5ae5d.jpg\" alt=\"Pre tag per mostrare codice WordPress\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Pre tag<\/figcaption><\/figure>\n<p>Passate all&#8217;editor <strong>visuale<\/strong> per vedere come si presenta. Noterete che la sezione di testo avr\u00e0 un&#8217;etichetta <strong>&#8220;Preformatted&#8221;<\/strong>, che \u00e8 proprio lo scopo del tag <code>&lt;pre&gt;<\/code>.<\/p>\n<figure id=\"attachment_151587\" aria-describedby=\"caption-attachment-151587\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151587\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4bc9f2cabf7b45aeba2da63e5bd1f96f.jpg\" alt=\"Scegliere l'opzione Preformatted\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">Scegliere l&#8217;opzione Preformatted<\/figcaption><\/figure>\n<p>Cliccate su <strong>Pubblica<\/strong> o <strong>Aggiorna<\/strong>, quindi passate al frontend per vedere il codice nella sua forma originale. Come i tag <code>&lt;code&gt;<\/code>, anche i tag <code>&lt;pre&gt;<\/code> sono pessimi per quanto riguarda la formattazione, quindi l&#8217;aspetto sar\u00e0 il pi\u00f9 semplice possibile. Tuttavia, esistono dei modi per personalizzarne lo stile.<\/p>\n<figure id=\"attachment_151588\" aria-describedby=\"caption-attachment-151588\" style=\"width: 1177px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.12b9304ed5de42298a6474f01813d716.jpg\" alt=\"Risultati del frontend per mostrare codice WordPress\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Risultati del frontend<\/figcaption><\/figure>\n<h5>Suggerimenti per lo stile dei tag &lt;pre&#038;gt<\/h5>\n<p>I tag <code>&lt;pre&gt;<\/code> sono meno stabili dei tag <code>&lt;code&gt;<\/code>, quindi potreste incontrare delle difficolt\u00e0 a seconda del tipo di codice che state cercando di mostrare.<\/p>\n<p>Utilizzate questi suggerimenti per migliorarne l&#8217;aspetto:<\/p>\n<ul>\n<li>Cercate di eliminare o evitare completamente le interruzioni di riga, poich\u00e9 il tag <code>&lt;pre&gt;<\/code> spesso non le riconosce. In generale, non reagisce bene a un numero eccessivo di interruzioni di riga.<\/li>\n<li>Considerate l&#8217;aggiunta di una propriet\u00e0 <code>overflow-x:auto;<\/code> nel vostro CSS per aggiungere la funzionalit\u00e0 di scorrimento al codice del tag <code>&lt;pre&gt;<\/code>. Questo \u00e8 utile in caso di contenuti sovrabbondanti, dato che il tag <code>&lt;pre&gt;<\/code> da solo permette al codice di uscire dalla pagina.<\/li>\n<li>Scegliete i font monospaziati.<\/li>\n<\/ul>\n<p>Potete anche personalizzare lo stile della formattazione del testo e il riquadro dietro il codice. Ecco un modello iniziale che potete <a href=\"https:\/\/kinsta.com\/it\/blog\/modificare-codice-wordpress\/\">aggiungere al vostro file CSS<\/a>:<\/p>\n<pre><code class=\"language-css\">article pre{\nbackground:#ffffff;\nborder:3px #eee solid;\nborder-top:30px #eee solid;\nfont-family:Consolas, courier;\nfont-size:0.8em;\nwhite-space:pre;\noverflow-x:auto;\n}<\/code><\/pre>\n<h3>Metodo 6: Utilizzare un editor Markdown collegato a WordPress<\/h3>\n<p>Gli editor Markdown offrono la possibilit\u00e0 non solo di digitare e formattare pi\u00f9 velocemente, ma molti di essi si collegano direttamente a WordPress per una pubblicazione immediata direttamente dall&#8217;editor.<\/p>\n<p>Molti scrittori si rivolgono agli editor markdown per questo rapido processo di creazione dei contenuti. E fortunatamente, alcuni di questi editor offrono il markdown per i blocchi di codice, il che significa che potete visualizzare il codice all&#8217;interno dell&#8217;editor markdown e poi inviarlo direttamente a WordPress per la pubblicazione.<\/p>\n<p>Tenete presente che i <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/\">normali editor di testo<\/a> (come <a href=\"https:\/\/kinsta.com\/it\/blog\/come-usare-sublime-text\/\">Sublime Text<\/a>) non preservano l&#8217;integrit\u00e0 del codice quando viene trasferito per la pubblicazione su WordPress. Inoltre, gli <a href=\"https:\/\/kinsta.com\/it\/blog\/editor-html-gratuiti\/\">editor HTML<\/a>, pur essendo eccellenti per scrivere e memorizzare il codice, non forniscono le funzioni di evidenziazione necessarie per preservare il codice per la pubblicazione su WordPress.<\/p>\n<p>Ci sono <a href=\"https:\/\/kinsta.com\/it\/blog\/editor-di-markdown\/\">molti editor markdown<\/a> tra cui scegliere, ma le soluzioni ideali condividono due caratteristiche:<\/p>\n<ol>\n<li>Esportazione diretta su WordPress<\/li>\n<li>Markdown per l&#8217;evidenziazione del codice<\/li>\n<\/ol>\n<p>Potete comunque optare per un editor markdown con esportazione in HTML, se non vi piace l&#8217;esportazione diretta su WordPress.<\/p>\n<p>I migliori editor markdown con entrambe le funzioni sono:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux e altri)<\/li>\n<\/ul>\n<p>Ulysses e ByWord sono applicazioni premium, mentre Obsidian ha sia la versione gratuita che quella premium.<\/p>\n<p>Per il seguente tutorial utilizzeremo Ulysses.<\/p>\n<h4>Passo 1: Aggiungere un blocco di codice longform in Ulysses<\/h4>\n<p>Durante la stesura di un documento in Ulysses, digitate <code>\"<\/code> markdown &#8211; cio\u00e8 due apostrofi &#8211; ogni volta che volete aggiungere immediatamente un blocco di evidenziazione del codice all&#8217;interno del documento.<\/p>\n<p>Questo metodo di markdown \u00e8 per blocchi di codice pi\u00f9 lunghi. Non \u00e8 utilizzabile nel mezzo di un paragrafo, quindi dovete creare una nuova riga per attivare il markdown.<\/p>\n<figure id=\"attachment_151589\" aria-describedby=\"caption-attachment-151589\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151589\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gif-for-code-block.14390a79e7064955b03f88869ec1ffee.gif\" alt=\"Codice markdown di Ulisse\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Codice markdown di Ulisse<\/figcaption><\/figure>\n<p>Una volta visualizzato l&#8217;evidenziatore di codice, potete digitare o incollare qualsiasi cosa vogliate.<\/p>\n<figure id=\"attachment_151590\" aria-describedby=\"caption-attachment-151590\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5f94d159066484fb7b70b16a1c3c73a.jpg\" alt=\"Incollare il codice nell'evidenziatore di Ulisse\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Incollare il codice nell&#8217;evidenziatore di Ulisse<\/figcaption><\/figure>\n<p>Un altro modo per attivare il blocco codice \u00e8 quello di cliccare sulla voce di menu <strong>Markdown<\/strong> (tre punti orizzontali) e selezionare l&#8217;opzione <strong>Codice<\/strong>.<\/p>\n<figure id=\"attachment_151592\" aria-describedby=\"caption-attachment-151592\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151592\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.81ab2e958f054c0798abc43d606aca57.jpg\" alt=\"Usare il menu Markdown per selezionare la voce Codice\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Usare il menu Markdown per selezionare la voce Codice<\/figcaption><\/figure>\n<p>Dopo aver cliccato su questa voce di menu, il campo di evidenziazione del codice appare nel punto in cui si trovava l&#8217;ultimo cursore.<\/p>\n<figure id=\"attachment_151593\" aria-describedby=\"caption-attachment-151593\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151593\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.41e360b297fd4c60be68ccb8bcf0cccf.jpg\" alt=\"Evidenziatore di codice vuoto\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Evidenziatore di codice vuoto<\/figcaption><\/figure>\n<p>Per inserire gli snippet di codice all&#8217;interno dei paragrafi, dovete ricorrere al markdown di <code>``<\/code> (che ha quasi lo stesso aspetto, ma in realt\u00e0 sono due accenti acuti\/gravi al posto degli apostrofi).<\/p>\n<h4>Passo 3: Esportazione in WordPress<\/h4>\n<p>Una volta pronto il documento, \u00e8 il momento di esportare tutto su WordPress.<\/p>\n<p>La cosa pi\u00f9 bella degli editor markdown che si collegano a WordPress \u00e8 che mantengono i blocchi di codice durante il trasferimento. In questo modo, vedrete evidenziati i codici ben formattati e pronti per essere pubblicati su WordPress.<\/p>\n<figure id=\"attachment_151594\" aria-describedby=\"caption-attachment-151594\" style=\"width: 996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151594\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.59962c045f204e8990253665628656d0.jpg\" alt=\"L'evidenziatore di codice rimane invariato in WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">L&#8217;evidenziatore di codice rimane invariato in WordPress<\/figcaption><\/figure>\n<p>In Ulysses, andate nella parte superiore del documento per trovare la barra degli strumenti. Cliccate sul pulsante <strong>Publishing Preview<\/strong>.<\/p>\n<figure id=\"attachment_151595\" aria-describedby=\"caption-attachment-151595\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.927b4b9ed6d54119baebba453248cf41.jpg\" alt=\"Selezionare il pulsante Publishing Preview per mostrare codice in WordPress\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">Selezionare il pulsante Publishing Preview<\/figcaption><\/figure>\n<p>Si apre un menu a tendina per selezionare la piattaforma e il sito web su cui pubblicare. Potete anche usare l&#8217;opzione <strong>Manage Accounts<\/strong> in quel menu per accedere a un sito WordPress prima di esportare.<\/p>\n<p>Una volta scelto il sito web giusto, cliccate sul pulsante <strong>Publish<\/strong>.<\/p>\n<figure id=\"attachment_151596\" aria-describedby=\"caption-attachment-151596\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151596\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e00fbece9dc94fea8e8a5e63d1336717.jpg\" alt=\"Scegliere un account e pubblicare\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">Scegliere un account e pubblicare<\/figcaption><\/figure>\n<p>Inserite il titolo del post, l&#8217;orario e tutte le altre informazioni che desiderate, come le categorie, i tag e le immagini in evidenza.<\/p>\n<p>La parte pi\u00f9 importante, tuttavia, \u00e8 impostare lo <strong>stato<\/strong> su <strong>Draft<\/strong> per non pubblicare il post senza averlo prima revisionato su WordPress.<\/p>\n<p>Cliccate su <strong>OK<\/strong> per procedere.<\/p>\n<figure id=\"attachment_151597\" aria-describedby=\"caption-attachment-151597\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b14f638aa5d94d789d323bfc861dafca.jpg\" alt=\"Scegliere uno stato e cliccare su OK\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">Scegliere uno stato e cliccare su OK<\/figcaption><\/figure>\n<p>In pochi secondi, Ulysses inserisce l&#8217;intero documento in un nuovo post di WordPress (potrebbe essere necessario accedere all&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/amministrazione-wordpress\/\">amministrazione di WordPress<\/a> quando appare).<\/p>\n<p>Vedrete i blocchi di codice gi\u00e0 configurati e pronti per essere pubblicati. Cliccate sul pulsante <strong>Pubblica<\/strong> per renderlo attivo.<\/p>\n<figure id=\"attachment_151598\" aria-describedby=\"caption-attachment-151598\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151598\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.9b10519d98304e4b83dfefbefe2955fe.jpg\" alt=\"Blocchi di codice nell'editor di WordPress\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Blocchi di codice nell&#8217;editor di WordPress<\/figcaption><\/figure>\n<p>Nel frontend, vedrete che i frammenti di codice in riga e i blocchi di codice pi\u00f9 grandi sono ben evidenziati e la formattazione del codice \u00e8 stata conservata.<\/p>\n<figure id=\"attachment_151599\" aria-describedby=\"caption-attachment-151599\" style=\"width: 916px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.7fe2b1887f1644d7a819d9a68d18481b.jpg\" alt=\"Risultati del frontend per mostrare codice in WordPress\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Risultati del frontend<\/figcaption><\/figure>\n\n<h2>Riepilogo<\/h2>\n<p>Esistono diversi metodi per visualizzare correttamente il codice su WordPress e spesso dipende dall&#8217;editor WordPress utilizzato, dal linguaggio di codice che si desidera mostrare e dal modo in cui si desidera visualizzare e formattare il codice. Ad esempio, la scelta di un plugin offre sicuramente un&#8217;esperienza di formattazione pi\u00f9 creativa rispetto al blocco Codice standard dell&#8217;editor WordPress Gutenberg.<\/p>\n<p>In questo articolo abbiamo illustrato diversi metodi per visualizzare il codice in WordPress.<\/p>\n<p>In genere consigliamo di iniziare con il metodo 1 e di procedere per gradi. Il metodo 2 \u00e8 utile se cercate altre opzioni di stile, mentre i metodi 3-5 sono utili solo in situazioni particolari. Il metodo 6 \u00e8 una sorta di soluzione bonus, pensata per coloro che preferiscono gli editor markdown alla scrittura diretta in WordPress.<\/p>\n<p>Indipendentemente dal metodo scelto, un <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">provider di hosting affidabile<\/a> pu\u00f2 aiutarvi a migliorare ulteriormente il vostro sito. Le <a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">soluzioni di Hosting WordPress di Kinsta<\/a> offrono <a href=\"https:\/\/kinsta.com\/it\/prezzi\/\">piani per siti<\/a> di ogni forma e dimensione e la piattaforma facile da usare &#8211; <a href=\"https:\/\/kinsta.com\/it\/mykinsta\/\">MyKinsta<\/a>, una dashboard di amministrazione proprietaria &#8211; rende la modifica di qualsiasi parte del vostro sito e dei suoi file un gioco da ragazzi. Inoltre, otterrete ulteriori vantaggi come <a href=\"https:\/\/kinsta.com\/it\/blog\/piattaforma-cloud-per-sviluppatori\/\">velocit\u00e0<\/a>, <a href=\"https:\/\/kinsta.com\/it\/integrazione-cloudflare\/\">sicurezza<\/a> e <a href=\"https:\/\/kinsta.com\/it\/supporto-kinsta\/\">supporto<\/a> di livello mondiale di Kinsta.<\/p>\n<p>Avete provato a visualizzare il codice in WordPress in passato? Se s\u00ec, quale metodo ha funzionato meglio per voi? Fatecelo sapere nella sezione commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imparare a mostrare il codice in WordPress \u00e8 fondamentale per i blogger e i creatori di contenuti che pubblicano costantemente codice online per i propri lettori. &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69089,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25872,25873],"class_list":["post-69088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-suggerimenti-wordpress","topic-sviluppo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l&#039;uso di software markdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)\" \/>\n<meta property=\"og:description\" content=\"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l&#039;uso di software markdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:21:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-22T08:11:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l&#039;uso di software markdown.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)\",\"datePublished\":\"2023-05-17T13:21:56+00:00\",\"dateModified\":\"2023-05-22T08:11:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\"},\"wordCount\":5482,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\",\"name\":\"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:21:56+00:00\",\"dateModified\":\"2023-05-22T08:11:53+00:00\",\"description\":\"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l'uso di software markdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Suggerimenti per WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/suggerimenti-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole) - Kinsta\u00ae","description":"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l'uso di software markdown.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)","og_description":"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l'uso di software markdown.","og_url":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-05-17T13:21:56+00:00","article_modified_time":"2023-05-22T08:11:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l'uso di software markdown.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"28 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)","datePublished":"2023-05-17T13:21:56+00:00","dateModified":"2023-05-22T08:11:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/"},"wordCount":5482,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/","name":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:21:56+00:00","dateModified":"2023-05-22T08:11:53+00:00","description":"Scopri come utilizzare WordPress per mostrare codice, con plugin, shortcode e strumenti encoder. Esaminiamo anche l'uso di software markdown.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/mostrare-codice-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Suggerimenti per WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/suggerimenti-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come Mostrare il Codice in WordPress (e Renderlo pi\u00f9 Gradevole)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=69088"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69088\/revisions"}],"predecessor-version":[{"id":69210,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69088\/revisions\/69210"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/translations\/dk"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69088\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/69089"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=69088"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=69088"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=69088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}