Skip to content
> 💻 🧠 Codice 1001 > 🧪📓 Senza categoria > Evidenziazione del codice in WordPress con Gutenberg e Prism.js

Evidenziazione del codice in WordPress con Gutenberg e Prism.js

Quando si crea contenuto in WordPress, di solito si utilizza l’editor Gutenberg.
È stato introdotto con WordPress 5.0 (dicembre 2018) e ha sostituito il vecchio editor di testo TinyMCE.

TinyMCE era un editor semplice dell’era del Web 1.0 — un campo <textarea> con pulsanti come “grassetto”, “corsivo” e “link”.
Tutto il testo veniva salvato come un unico flusso di codice HTML, rendendo difficile spostare blocchi o inserire qualcosa nel mezzo.
Inoltre, TinyMCE non supportava la griglia adattiva a 12 colonne, diventata lo standard de facto durante l’era del Web 2.0.
Per questo motivo, i layout complessi dovevano essere costruiti manualmente con HTML e CSS.

In Questo Articolo
  1. Gutenberg — un editor di nuova generazione
  2. Come Gutenberg gestisce la griglia
  3. Il problema del blocco codice standard
  4. Cos’è Prism.js
  5. Lavorare con un tema figlio
  6. Come usare il sito Prism.js
  7. Collegare Prism.js a WordPress
  8. Numerazione automatica delle righe
  9. Escape dei caratteri HTML
  10. Stili per i blocchi di codice
  11. Funzionalità aggiuntive di Prism.js
  12. Prima e dopo Prism.js

Gutenberg — un editor di nuova generazione

L’editor Gutenberg ha risolto questi problemi.
Ora ogni parte della pagina esiste come blocco — titolo, paragrafo, citazione, immagine, tabella o frammento di codice —
rendendo l’editing molto più semplice e le pagine flessibili e reattive.

Il contenuto deve essere leggibile su qualsiasi dispositivo, dallo smartphone ai grandi monitor.
Quando un sito non è reattivo, il testo “si sposta”, le immagini vengono tagliate e le tabelle escono dal contenitore.
Questo viene risolto grazie a un layout adattivo, che si adatta automaticamente alle dimensioni dello schermo.

Alla base di questo layout c’è una griglia a 12 colonne, resa popolare da framework come Bootstrap e Foundation.
La larghezza del contenitore viene divisa in 12 parti uguali (8,33% ciascuna), permettendo di creare praticamente qualsiasi tipo di composizione.

Esempio:

1 colonna  → [████████████] 100%
2 colonne → [██████][██████] 6/6
3 colonne → [████][████][████] 4/4/4
4 colonne → [███][███][███][███] 3/3/3/3

Sui dispositivi mobili, le colonne si dispongono automaticamente in verticale,
mantenendo il contenuto leggibile e ben ordinato.

Come Gutenberg gestisce la griglia

In Gutenberg, la griglia a 12 colonne è implementata tramite il blocco Colonne,
che adatta automaticamente la disposizione degli elementi in base alla larghezza dello schermo.
In HTML, si tratta di contenitori con le classi wp-block-columns e wp-block-column,
mentre in CSS viene utilizzato Flexbox, che gestisce l’allineamento e il comportamento delle colonne.

Esempio:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Prima colonna</p>
  </div>
  <div class="wp-block-column">
    <p>Seconda colonna</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

Questa struttura rende Gutenberg flessibile e garantisce un design coerente su tutti i dispositivi.

Il problema del blocco codice standard

Tra tutti i blocchi di Gutenberg, il blocco Codice merita un’attenzione particolare.
Serve per mostrare esempi di programmi, script o configurazioni.
Tecnicamente, è un semplice contenitore HTML:

<pre> ... </pre>

Gutenberg e TinyMCE lo visualizzano allo stesso modo — come testo in font monospaziato
(di solito Consolas, Courier New o Monaco)
senza evidenziazione della sintassi o numerazione delle righe.

Va bene per l’uso base, ma negli articoli tecnici o nei tutorial il codice senza colori è difficile da leggere.
La soluzione più semplice è utilizzare Prism.js.

Cos’è Prism.js

Prism.js è una libreria JavaScript leggera per l’evidenziazione della sintassi direttamente nel browser.
Non richiede moduli lato server: lo script analizza il contenuto delle etichette <pre><code>...</code></pre>
e il file di stile prism.css colora parole chiave, stringhe, numeri e commenti.

Supporta decine di linguaggi di programmazione — da HTML e JavaScript a Python e Go —
e offre numerosi plugin: numerazione delle righe, pulsante di copia, nome del linguaggio, temi chiaro e scuro, ecc.

Esempio:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}
</code></pre>

Dopo aver aggiunto Prism.js, il codice verrà evidenziato automaticamente nel browser.

Lavorare con un tema figlio

Prima di aggiungere Prism.js, è importante non modificare direttamente il tema principale.
Tutte le personalizzazioni in WordPress devono essere fatte tramite un tema figlio.

Un tema WordPress controlla l’aspetto del sito — modelli, stili, menu, intestazioni e piè di pagina.
Se si modifica il tema attivo, il prossimo aggiornamento eliminerà le modifiche.

Un tema figlio evita questo problema: eredita dal tema principale ma conserva le personalizzazioni separatamente,
proteggendo il codice durante gli aggiornamenti.

Crea una cartella:

/wp-content/themes/il-mio-tema-figlio/

Aggiungi un file style.css:

/*
 Theme Name:   Il mio tema figlio
 Template:     il-mio-tema
 Version:      1.0
*/

Il campo Template deve corrispondere al nome della cartella del tema principale.
Poi crea functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

Attiva il tema figlio in Aspetto → Temi
e lavora all’interno di esso per aggiungere le modifiche.

Come usare il sito Prism.js

Una volta pronto il tema figlio, visita il sito ufficiale di Prism.js:
👉 https://prismjs.com

Apri la scheda Download per creare la tua versione personalizzata della libreria.

Configurazione consigliata

  1. Compression level: Minified
  2. Languages: HTML, CSS, JavaScript, PHP, Python, JSON
  3. Plugins:
    • Line Numbers
    • Toolbar
    • Copy to Clipboard Button
    • (opzionale) Show Language
    • (opzionale) Highlight Lines

Scarica:

  • DOWNLOAD JS → prism.js
  • DOWNLOAD CSS → prism.css

Posiziona entrambi i file nella cartella del tema figlio:

/wp-content/themes/il-mio-tema-figlio/

Collegare Prism.js a WordPress

Apri functions.php e aggiungi:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

Ora Prism.js evidenzierà automaticamente tutto il codice contenuto tra
<pre><code>...</code></pre>.

Numerazione automatica delle righe

Puoi aggiungere un filtro WordPress per numerare automaticamente le righe:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

Escape dei caratteri HTML

Se il tuo codice contiene i simboli < o >, il browser potrebbe interpretarli come tag HTML.
Per evitarlo, aggiungi un filtro che li converta automaticamente quando salvi il post:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}</code>";
        },
        $content
    );
}

Stili per i blocchi di codice

Aggiungi questi stili nel file style.css del tema figlio:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

Funzionalità aggiuntive di Prism.js

  • 🔢 Numerazione delle righe — aggiunge numeri come negli IDE.
  • 🧠 Evidenziazione di righe specifiche — usa data-line="2,4-5" per mettere in risalto alcune righe.
  • 📋 Pulsante Copia — copia il codice con un clic.
  • 💡 Nome del linguaggio — mostra il linguaggio sopra il blocco.
  • 🌗 Tema chiaro e scuro — commutazione automatica:
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Personalizzazione — puoi modificare i colori dei token nel tuo style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

Prima e dopo Prism.js

Prima

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}
</code></pre>

Risultato:

function greet(name) {
  return `Hello, ${name}`;
}

Testo monospaziato, senza colori né numerazione.

Dopo

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}
</code></pre>

Risultato:

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Ogni riga ha un numero, il codice è colorato
e compare un pulsante Copy per copiare il contenuto.

Prism.js rende i frammenti di codice più chiari e leggibili.
Funziona interamente nel browser, senza plugin aggiuntivi,
e non influisce sulle prestazioni.
Una volta configurato, il codice apparirà ordinato, coerente e piacevole da leggere.

Leave a Reply

Your email address will not be published. Required fields are marked *