2023-11-20

Highlight.js e Laravel, evidenziare la sintassi all'interno dei tag <code></code>

Lavorando su questo sitarello, partendo già con l'idea di utilizzarlo per scriverci anche e soprattutto le cose che scopro ogni giorno nel magico mondo della programmazione, mi sono scontrato con la necessità di poter evidenziare la sintassi nei blocchi di codice che avrei inserito all'interno dei vari post, in modo da rendereli più leggibili.

Sicuramente si legge meglio questo codice:

class ExtendClass extends Class
{
    protected $var;

    public function __construct($input)
    {
        $this->var = $input;
    }
}

di questo:

class ExtendClass extends Class
{
    protected $var;

    public function __construct($input)
    {
        $this->var = $input;
    }
}

Bene. La soluzione, facendo una brevissima ricerca online, è Highlight.js.

L'integrazione

[premessa]

Questo blog è sviluppato con Laravel e ogni post è un file markdown che viene parsato tramite il metodo markdown di laravel. Questo perché sono pigro e perché mi andava cosi.

La cosa carina è che l'utilizzo di quel metodo parsa il blocco di codice inserendolo non solo all'interno dei tag <pre> e <code>, ma che se si specifica il linguaggio (ovvero inserendo il nome del linguaggio inserito nel blocco codice dopo i 3 apici [es. ```php]) al tag <code> viene aggiunta la classe language-{nomelinguaggio}, dove {nomelinguaggio} è il nome inserito dopo i tre apici.

Questa classe viene letta da highlight.js per decidere come evidenziare la sintassi.

[/premessa]

Leggendo la documentazione risulta immadiato come installare highlight.js su Laravel: npm install highlight.js. Allo stesso modo è altrettanto semplice integrare il JavaScript: basta aprire il file /resources/js/app.js e aggiungere

import hljs from 'highlight.js';

Almeno per me, però, è risultato meno immediato come integrare il css che permette effettivamente la stilizzazione del codice. Quanto riporta la documentazione infatti, nel mio progetto non funzionava. Dopo averci sbattuto un po' la testa, sono riuscito a risolvere il problema andando nel file /resources/scss/app.scss e aggiungendo

@import "/node_modules/highlight.js/scss/a11y-dark.scss";

dove a11y-dark.scss è il nome del file del tema che ho scelto.

Fatto! Ora il vostro progetto evidenzierà la sintassi dei vostri blocchi di codice in modo ineccepibile. :)