Nel panorama del syntax highlighting su web, il metodo tradizionale – che consiste nell’avvolgere ogni token con tag <span> – sta mostrando limiti su prestazioni e complessità del DOM, specialmente in presenza di blocchi di codice estesi. L’articolo "High-Performance Syntax Highlighting with CSS Highlights API" di Pavitra Golchha (24 ottobre 2025) presenta un’alternativa interessante: l’uso della CSS Custom Highlight API, che applica stili a partizioni di testo senza alterare la struttura del documento.
L’approccio descritto garantisce un rendering più efficiente, riducendo il numero di elementi nel DOM e alleggerendo il caricamento e l’interazione.
L’API consente di definire intervalli di testo (Range) via JavaScript, associarli a oggetti Highlight registrati nella HighlightRegistry, e applicare stili via il pseudo-elemento ::highlight(). Un modello che mantiene il DOM pulito, migliora le prestazioni e si adatta particolarmente a situazioni con numerosi esempi di codice nelle pagine tecniche.
Che cos’è la CSS Custom Highlight API
La CSS Custom Highlight API permette di stilizzare porzioni arbitrarie di testo tramite JavaScript, senza aggiungere tag HTML. Si crea un Range che definisce l’inizio e la fine del testo da evidenziare. Poi si instanzia un oggetto Highlight (che può contenere più range) e lo si registra con un nome tramite CSS.highlights.set("nome", highlight).
Infine, si applica uno stile con ::highlight(nome) nel CSS. Il vantaggio principale è la separazione tra la logica di selezione del testo e la presentazione, mantenendo il DOM più leggero e reattivo.
Implementazioni pratiche e casi d’uso
Un’implementazione concreta è offerta dal componente web personalizzato <syntax-highlight>, che integra Prism.js per l’analisi lessicale e utilizza la Custom Highlight API per applicare stili senza manipolazioni del DOM. Supporta oltre 200 linguaggi, temi multipli via CSS e garantisce accessibilità mediante attributi ARIA.
Un’altra esperienza interessante è quella di un blog che ha integrato questa tecnica per evidenziare snippet nel proprio sito, evitando l’iniezione di centinaia di <span>.
L’autore ha apprezzato la pulizia del markup e la migliore performance rispetto ai metodi tradizionali.
Pro e contro dell’approccio
Vantaggi:
- Prestazioni migliorate: meno elementi nel DOM, rendering nativo e ottimizzato dal browser
- Aggiornamenti più veloci: gli highlights si aggiornano dinamicamente senza dover ricreare elementi nel DOM
- Meno complessità: il codice rimane
Questa soluzione diventa ancora più rilevante man mano che siti e piattaforme aumentano la quantità di codice mostrato agli utenti e richiedono performance elevate in ogni contesto.
