Alcuni piccoli esempi tratti da due plugin usati per mostrare degli scorci di codice nei propri articoli, in modo elegante e semplice. Ti descriverò alcune particolarità di SyntaxHighlighter Evolved e di Crayon Syntax Highlighter. Entrambi possono soddisfare egregiamente le esigenze di un blog dedicato alla programmazione, in modo semplice.
Di cosa si occupano i syntax highlighter? Fanno in modo di formattare il testo del codice in modo simile a quanto fa un editor IDE avanzato per la programmazione. Quasi tutti gli editor hanno degli algoritmi che evidenziano la sintassi del linguaggio di programmazione in uso. Questo tipo di plugin non fa altro che estendere ai nostri articoli funzionalità simili e applicare a delle aree di testo delimitate da degli appositi marcatori una formattazione particolare del codice, riconoscendo lo stile del codice ed evidenziando con colori diversi la sintassi propria del linguaggio. Possono in oltre aggiungere la numerazione alle righe, e cosa fondamentale mantengono la spaziatura e l’indentazione del codice.
SyntaxHighlighter Evolved
Ho iniziato ad utilizzare qualche tempo fa il plugin SyntaxHighlighter Evolved, risolveva in maniera ottima la mia necessità di inserire all’interno degli articoli estratti di codice necessari alle spiegazioni.
Ha molte molte impostazioni e parametri che consentono di personalizzare come viene visualizzato il codice e tante altre cose. L’ho preferito a tanti altri perchè mi bastava aprire e chiudere il segnaposto e metterci in mezzo il codice senza tanti problemi.
Senza passare alcun parametro aggiuntivo il codice veniva formattato con un modello base senza troppe pretese. Ecco a titolo di esempio un’immagine tratta da uno dei miei articoli:
Per molto tempo questo plugin ha soddisfatto le mie necessità. Poi dopo un cambio di template al sito ho iniziato ad avere dei conflitti con gli stili del template. Puoi notare infatti che i numeri di riga non sono allineati alla corrispondete riga.
A tempo perso ho provato a sistemarlo, ma quando mi sembrava di aver risolto qualcosa, dopo mi accorgevo di qualche effetto secondario nello stile generale del sito. Quindi ho desistito. Anche perchè un successivo cambio di tema avrebbe riportato a galla gli stessi problemi.
Crayon Syntax Highlighter
Mi sono imbattuto casualmente in questo plugin, mentre stavo consultando una pagina di uno sviluppatore americano. Mentre studiavo gli esempi di codice proposti, mi sono accorto che il sito era realizzato con wordpress, e che il plugin che visualizzava gli esempi faceva un lavoro spettacolare.
Sono andato alla ricerca del plugin ed ecco che dopo dieci minuti era installato e pronto per fare qualche test.
Ecco come appare il codice dell’esempio precedente visualizzato da Crayon:
Questo è uno dei tanti stili presenti in Crayon per visualizzare il codice. Probabilmente anche con SyntaxHighlighter è possibile utilizzare stili diversi di formattazione.
A giocare a favore di Crayon è la sua interfaccia per gestire gli spezzoni di codice, tramite questa interfaccia è possibile intervenire sulle impostazioni standard, che verranno poi applicate solo all’esempio su cui si sta lavorando, scegliere un tema di formattazione diverso, specificare se evidenziare qualche riga in particolare, e specificare il tipo di linguaggio del codice, per applicare l’evidenziazione adeguata.
Rispetto all’altro plugin, non è necessario ricordare i parametri da inserire per alterare l’aspetto, Crayon infatti propone una comoda interfaccia: Edit Code. Eccone un esempio:
E’ sempre lo stesso spezzone di codice visualizzato tramite l’editor del codice di Crayon. Ho selezionato il tipo di linguaggio del codice, in questo caso XHTML, e salvato le mie modifiche con l’apposito pulsante. Il pulsante che compare potrebbe essere “salva” oppure “aggiungi” a seconda delle situazioni: stiamo modificando uno snipet di codice precedente oppure se lo stiamo inserendo per la prima volta. Le opzioni disponibili sono veramente tante, ho preso come esempio solo la prima parte dell’immagine.
Per aprire l’editor è facilissimo, una volta installato il plugin in modalità edit degli articoli, compare un nuovo pulsante, eccolo evidenziato nell’immagine seguente per l’editing in modalità visuale, mentre per l’editing in modalità testo il pulsante ha l’etichetta “crayon” :
Un esempio concreto
Fin’ora ho incluso delle immagini di esempio, vediamo di visualizzare il codice tramite crayon direttamente in questo articolo, e per non farci mancare nulla cambio pure lo stile scegliendone uno tra i tanti disponibili, ad esempio un bel stile retrò che simula un monitor a fosfori verdi come il Terminal:
<style type="text/css">
.navbar, .page-title-section {
display: none;
}
.container {
width: 800px;
}
</style>
In questo esempio ho evidenziato le righe 6, 7, 8 impostandole nell’editor code.
La modalità inline
Un’altra caratteristica interessante è la possibilità di usare Crayon specificando di applicare la formattazione in modo inline, questo per inserire all’interno del testo descrittivo un esempio formattato o un punto su cui attirare l’attenzione, vediamo subito un esempio:
modifichiamo la riga 7 nel seguente modo: width: 900px; andando a sostituire il valore che determina la larghezza della bla bla bla…
Direi che questa funzionalità è interessante, si tratta di attivare una spunta nella editor code, attivando la funzione inline.
Serve proprio l’interfaccia per inserire il codice?
Ni. Volendo potresti scrivere in modalità testuale i parametri che controllano la visualizzazione di Crayon.
Vediamo acluni semplici esempi, prima il risultato che otteniamo nel caso minimalista.
Minimalista senza interfaccia
Viene visualizzato lo stile di default selezionato nelle impostazioni base.
esempio minimalista di codice quasi
Semplice con interfaccia
Un esempio un poco più articolato, inserendo un titolo, evidenziando delle righe, cambiando stile.
... codice elaborato ... con tante righe da mostrare per vedere quelle evidenziate
Ecco cosa si nasconde dietro
In modalità testo avremmo dovuto scrivere il codice seguente per ottenere la visualizzazione dei due esempi precedenti. In particolare il tag <pre></pre> è il marcatore usato da Crayon per attivarsi, quello che trova all’interno di questi viene formattato. Le righe da 1 a 6 sono il codice del primo esempio, il tag è proprio ridotto all’osso.
Mentre le righe da 9 a 18 sono quelle del secondo esempio. E’ sulla riga 9 che voglio portare la tua attenzione, tutti quei parametri è meglio gestirli con l’interfaccia editor code, piuttosto che scriverli a mano.
<pre> esempio minimalista di codice quasi </pre> <pre class="theme:github lang:xhtml mark:6,7,8 decode:true" title="Semplice con interfaccia"> ... codice elaborato ... con tante righe da mostrare per vedere quelle evidenziate </pre>
Possibili problemi
Credo che i soli problemi che possono arrivare sono dall’utilizzo di entrambi i plugin nello stesso articolo.
Me ne sono accorto infatti mentre facevo dei test. Avevo sostituito la formattazione di un pezzo di codice dentro un articolo passando da SyntaxHighlighter a Crayon. Fatta la modifica sono andato in anteprima per vedere il risultato ed ecco come appariva:
Un bel giallino pallido al posto della bellissima formattazione che mi aspettavo. Questo probabilmente era dovuto a qualche conflitto di CSS.
La cosa mi sembrava sospetta, perchè nei test aveva sempre funzionato tutto correttamente. Scrivevo il codice, anteprima, ed ecco la formattazione desiderata.
Questo era il primo articolo su cui intervenivo andando ad effettuare la sostituzione passando da un plugin all’altro. Ho ripreso l’articolo e scendendo nella pagina c’erano altri esempi che usavano il primo plugin. Dopo che li ho convertiti tutti gestendoli con Crayon l’anteprima ha iniziato a visualizzarmi la pagina in modo corretto. Niente più giallini o quasi.
Ma devo tenere entrambi i plugin?
Io non ho disinstallato SyntaxHighlighter, l’ho lasciato attivo ed installato anche Crayon. Nei test ho visto che tutto funzionava se usavo un plugin solo per articolo.
C’erano diversi articoli da correggere e non avevo intenzione di mettermi a farlo tutto in una volta. Quindi ho tenuto entrambi i plugin mentre effettuavo le mie modifiche. Usavo Crayon direttamente per i nuovi articoli.
Una volta finita la conversione toglierò SyntaxHighlighter.
Capitan Ovvio
In questa pagina ho giocato con i vari stili di Crayon, formattando vari esempi con stili diversi.
In un articolo è meglio non abusare di questa possibilità. Ancora meglio avere un unico stile in tutto l’articolo.
Meglio ancora se tutto il sito adotta lo stesso stile.