Matteo Vignoli

Sviluppatore Web Full-Stack autodidatta, curioso per natura,
attualmente impiegato a Milano presso ContactLab per conto di Anoki S.r.L.

Syntax Hightlight su Ghost in modo facile e veloce

  Tempo di lettura:

Ghost ad oggi non ha ancora un evidenziatore di sintassi (syntax hightlight) nativo, ma implementarne uno è il primo passo da fare per chi vuole creare un blog sulla programmazione e c'è da dire che l'operazione è estremamente semplice.

Anzi, a voler essere precisi, ci sono almeno due modi per inserire in modo facile e veloce il syntax highlighting, ed entrambi non portano via più di 5 minuti.

Per questo mini tutorial ho utilizzato Prism.js perchè, oltre ad averlo usato in passato, è uno dei più semplici da integrare e fra i più leggeri, ma esistono diverse alternative e l'implementazione è pressochè identica qualunque di esse si scelga.

Caricare Prism.js sul server

Andiamo sul sito di Prism.js, dove un chiaro ed evidente bottone di "Download" ci indica qual'è il passo successivo da fare.

screenshot sito web prism.js

Qui selezioniamo con le checkbox quali sono i linguaggi che vorremo evidenziare (di default sono preselezionati markup (html, xml), javascript e c-like - prerequisito per javascript), il tema da utilizzare (io sono decisamente a favore di quelli scuri, vi consiglio Okaidia, basato sul famoso Monokai) e gli eventuali plugin per integrare funzionalità aggiuntive (utilissimo è quello per visualizzare il numero di linea).

In fondo alla pagina troveremo quindi i link di download per lo stile (prism.css) e il javascript (prism.js), che procederemo poi a caricare sullo spazio server di Ghost all'interno della relativa cartella (content/themes/[nome-tema]/assets/css o content/themes/[nome-tema]/assets/js) nel tema attivo.

Attenzione perchè i file non sono minificati: anche se in alto c'è l'opzione "minified" si riferisce soltanto a file del core, non a quelli delle diverse estensioni; sono tuttavia unificati in un'unico foglio di stile / javascript, che è meglio di niente.

Lo step successivo è quello di aprire il file del template (io li ho messi in default.hbs) e linkarli normalmente:

CSS:

    {{!-- Styles'n'Scripts --}}
    <!-- altri stili qui del tema -->
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

Javascript:

    {{!-- Vendors scripts --}}
    <script src="{{asset "js/prism.js"}}"></script>

(se non siete in modalità sviluppo o debug ricordatevi che è necessario riavviare il server di Ghost: $ sudo ghost restart)

Usare la funzionalità Code Injection di Ghost

Nel pannello amministrativo di Ghost abbiamo a disposizione una funzionalità molto importante e pratica, la Code Injection, ossia la possibilità di inserere CSS o JS che verranno poi applicati automaticamente al template dalla piattaforma stessa.

Code Injection è un metodo molto rapido ed indolore per inserire risorse aggiuntive senza dover mettere mano al codice, e fra le due soluzioni forse è la più pulita e rapida, adatta anche a chi non è abituato a smanettare direttamente con i file sorgente.

Screenshot Code Injection Ghost

E' sufficiente scrivere nelle due aree di testo i link agli stili e ai javascript perchè Ghost li carichi all'interno di ogni post. Ma dove recuperare i file? Ci sono due possibilità: o li carichiamo sullo spazio server e forniamo qui il percorso corretto, oppure utilizziamo una CDN che generosamente si prende l'onere di fornirci i file necessari senza fatica.

Sono riuscito a trovare soltanto una CDN che fornisca Prism, ed è pure aggiornata all'ultima versione disponibile: JsDeliver.

JsDeliver CDN per Prism.js

Qui potete recuperare tutti i file necessari al funzionamento di Prism.js, dal core ai componenti (ossia i linguaggi), ai plugin, al tema da utilizzare. Basta usare lo switch relativo di ogni voce per selezionare quale vogliamo includere nel file finale:
switch per selezionare voce

A questo punto si clicca su "Show & Configure all links" e qui avremmo la possibilità di copiare il link (si può averlo anche già formattato come html) del css e del javascript da incollare poi nella sezione Code Injection di Ghost.

Così come avviene per il download dal sito ufficiale, anche i file forniti da JsDeliver sono unificati (è possibile copiarli separatamente ma è raccomandato usarne solo uno unico), e c'è di più: sono anche minificati, quindi un ulteriore risparmi di banda per loro e di caricamento dello script per noi.

Utilizzare Prism.js all'interno di un articolo

Una volta recuperati i file applicare il Syntax Highlight è estremamente semplice, basta racchiudere il codice tra backticks ed indicare qual'è il linguaggio che stiamo utilizzando, ad esempio:

```javascript
    function makeGhost(options) {
        options = options || {};
        return server(options);
    }
```

diventa:

    function makeGhost(options) {
        options = options || {};
        return server(options);
    }

Anche se Ghost non dispone (attualmente) di un sistema di plugin estenderne le funzionalità è relativamente semplice, come abbiamo appunto visto aggiungere un syntax highlight è facile e veloce e si è subito operativi.

Smettere di fumare: un anno senza sigarette

Oggi è un anno esatto da quando ho deciso di smettere di fumare.Un anno senza sigarette che, devo dire la verità, si è rivelato più...

MatteoVignoli.it   Non perderti nulla da MatteoVignoli.it, ricevi aggiornamenti via mail.