Prism js - Syntax Higlighter

Quando abbiamo creato codeplus.it ci siamo trovati di fronte alla scelta di un syntax highlighter, per inserire le porzioni di codice nei nostri articoli, la scelta è ricaduta su prism.js.

I punti di forza di questo syntax highlighter sono molteplici, la facilità si utilizzo, il grande numero di linguaggi supportati e la facilità di installazione.

Andiamo a vedere come installarlo nel proprio sito e come utilizzarlo.

Per prima cosa andiamo sul sito prismjs.com e clicchiamo su download. Ora dobbiamo selezionare quale template vogliamo utilizzare per il nostro box (codeplus.it utilizza Okaida), e di seguito selezioniamo quali linguaggi vogliamo utilizzare. Possiamo anche selezionare alcuni plugin, ad esempio se vogliamo che siano visibili il numero delle righe o se vogliamo poter evidenziare alcune righe.

Una volta fatte le nostre scelte procediamo con il download dei file css e js.

Come si usa?

Beh l'utilizzo è veramente semplice, se vogliamo inserire un box con del codice scrivaimo:

<pre> (apertura box) <code class="language-xxxx"> !Codice Qui! </code> </pre>

Dove al posto di xxxx inseriremo il linguaggio che vogliamo utilizzare; se ad esempio vogliamo scrivere una porzione di codice in php inseriremo language-php. Ecco il risultato:

$string="questo è un test";
echo $string;