Come visualizzare codice HTML con Prism

Tre soluzioni per mostrare codice su una pagina web con Prism.js

Visualizzare codice HTML con Prism

Qualche accorgimento per visualizzare codice HTML con Prism.js

Se anche tu utilizzi Prism per l'highliting del codice in pagine web, ti sarai accorto che quando si inserisce codice HTML Prism non lo riproduce in modo corretto.

Tag xmp

In passato una soluzione valida era quella di utilizzare il tag <xmp></xmp> ma, pur funzionando in alcuni casi ancora oggi, in altri casi non produce l'output corretto.

&lt al posto di <

Un'altra soluzione tutt'altro che comoda è quella di sostituire tutti i simboli < con <.

Tag script

Esiste però una soluzione molto più efficiente e stilisticamente piacevole. Inserendo tutto il codice all'interno di un tag <script type="prism-html-markup"></script>, si ottiene proprio il risultato desiderato.

<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
            <h1 class="foo">This is a title</h1>
            <h2>Hello world</h2>
        </script>
    </code>
</pre>

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 23/04/2022

Categories: devtips

Tags: prism.js html javascript