Rainbow.js, una libreria JavaScript per evidenziare codice senza Plugin

Oggi vi spiegherò come implementare uno shortcode nel vostro tema che ci permette di inserire pezzi di codice in vari linguaggi di programmazione, tutto formattato ed evidenziato con colori scelti da noi, senza usare plugin, affidandosi alla libreria rainbow-min.js.

Perchè non usiamo Crayon o simili?

A me piace sviluppare temi che siano il più completi possibile e che oltre all’aspetto grafico si curino anche della corretta fruizione dei contenuti e quando si parla di codice ovviamente il syntax highlighting è d’obbligo!! Crayon è decisamente un ottimo plugin, che consiglio a tutti quelli che vogliono avere anche feature avanzate da text-editor, come conteggio delle righe, cambio tema con un click, scelta se fare highlight o meno, righe da numerare e righe da evidenziare, etc, etc.

Con il tempo, però, ho imparato che tutte queste belle features in realtà non servono quasi mai.

Quand’è stata l’ultima volta che il conteggio delle righe vi è tornato utile SCRIVENDO un post? Quante volte avete desiderato di poter inserire parti di codice non evidenziato nella stessa area di quello evidenziato?

A me praticamente mai. Anzi, devo essere sincero, a volte la formattazione che esce fuori da Crayon non è proprio quello che ci si aspetterebbe e si vorrebbe avere meno opzioni tra cui scegliere e inserire tutto in maniera immediata, magari con un comodo shortcode. Vediamo come fare nel dettaglio.

Visitiamo la pagina del progetto e scegliamo subito i linguaggi da includere nel pacchetto minimizzato, tramite il comodo tool;  io per completezza li ho scelti tutti. Poi inseriamo lo script nella cartella /js del vostro tema.

Come funziona Rainbow.js?

Rainbow va a prendere tutto ciò che è contenuto all’interno dei tag <pre><code data-language="general"></code></pre> e lo trasforma in testo formattato e colorato come piace tanto a noi!!

L’unica accortezza da tenere a mente è di specificare sempre il linguaggio di programmazione scelto tramite l’attributo data-language="php" e di impostare le classi css per vedere i colori nello lo stile deciso da noi.

Per quanto riguarda il CSS, ce ne occuperemo subito. Collegatevi con la pagina github del progetto e scaricate una versione a scelta del CSS che volete, sono dei preset che ricalcano fedelmente i colori di vari serivzi e piattaforme per fare codice, tra cui io ho deciso di scegliere proprio i colori di GitHub, ma ovviamente sentitevi liberi anche di sperimentare, magari ritoccando voi le classi con i colori più simili al vostro tema.

Scaricato il tema che ci interessa ci sono due modi per inserirlo in WordPress. Il primo consiste nel copiare le classi contenute nel file CSS che avete scaricato e nell’incollarle in quello del vostro tema, ovviamente è la via più facile, ma se un domani decidete di cambiare formattazione dovrete cancellare nuovamente tutto e reinserirlo. La seconda via è quella di includere direttamente il file nel tema, meglio se nella cartella /css, metodo che userò anche io in questo esempio.  Includiamo lo script che avete scaricato in precedenza e lo stile. Per farlo apriamo il function.php e aggiungiamo queste righe prima del tag ?>:

Ora andiamo a costruire lo shortcode da inserire nei post,  subito sotto le due righe di prima:

Ora inserendo tra i tag [rainbow][/rainbow] il vostro codice dovrebbe venire fuori evidenziato e formattato, però notate che il content viene appeso in un tag <p></p> e questo compromette tutti i nostri sforzi. Non demordete, c’è il modo di eliminare quei fastidiosi tag e ricevere un content pulito, basta inserire subito sotto questa funzione:

Il gioco è fatto!

Ricordatevi che potete stilare ogni elemento tramite CSS, io ad esempio ho aggiunto un bordo esterno arrotondato per dare un tocco più flat.

Cosa ne pensate? Entrerà a far parte delle funzioni base dei vostri temi come lo è per me?

Scrivetemelo nei commenti!!

Lascia il tuo Pensiero

4 Responses to “Rainbow.js, una libreria JavaScript per evidenziare codice senza Plugin”

  1. Andrea

    Purtroppo il conteggio delle righe è fondamentale nel mio blog. Però è un buono script è pesa molto poco. E’ da tenere sott’occhio.

    Rispondi
  2. Adriano

    Ciao,
    hai omesso di dire che Cryon non funziona o meglio da quando ho aggiornato alla wersione 3.7 di wordpress quando inizio un post mi appare come opzione nella toolbar ma al primo salvataggio della bozza sparisce, lascia il codice parzialmente evidenziato nel senso che un anteprima mi da effettivamente il codice colorato, le righe numerate eccetere ma non fa l’escaping html, non mi è più possibile inserirlo nei post eccetera. In pratica diventa inservibile. Sai mica consigliarmi un buon plugins per inserire l’highlight del codice che funzioni e non richieda shortcodes ? Non ci vado matto per gli shortcodes quindi preferisco non usarli.

    Adriano

    Rispondi
    • Andrea Barghigiani

      Ciao Adriano,
      leggo soltanto adesso questo commento e mi scuso se non ti ho risposto prima.

      Sinceramente io uso proprio Crayon su questo stesso blog e mi sembra che tutto funzioni correttamente, in questi casi potresti vedere se ci fosse qualche conflitto all’interno del tuo WordPress. Generalmente si disattiva un plugin dopo l’altro per cercare quale sia il colpevole. Prova anche a disintallare e reinstallare il plugin, a volte funziona.

      Evidenziatore di codice senza shortcode ne esistono veramente pochi perché altrimenti dovresti inserire i codici che Eugenio ha mostrato nell’articolo tu stesso. Ma se ne trovi qualcuno tu non dimenticare di farmelo conoscere!

      Spero di esserti stato di aiuto e a presto.

      Rispondi