Molti cms usano plugin basati sulla libreria php GeSHi, ma qui su Blogger non sono riuscito a trovare niente di simile. Quindi, bisogna ripiegare su di un evidenziatore in javascript.
La mia scelta (tanto per provarne uno...) è syntaxhighlighter sviluppato su Google code.
Vediamo quali sono i passaggi che dovrò eseguire per farlo funzionare su questo blog:
- Scarichiamo syntaxhighlighter dalla pagina del progetto e decompattiamo l'archivio
- E'necessario in qualche modo includere il codice nel nostro blog. Potremmo caricare i file su di un altro spazio web e poi linkarli nel codice del nostro blog, ma preferisco tenere tutto su Blogger, anche se sarà un po' laborioso.
- Andando nel pannello designer di Blogger
(Blogger -> Modello -> Personalizza -> Avanzato -> aggiungi css)
possiamo fare copia ed incolla del contenuto del file SyntaxHighlighter.css - Ora dobbiamo inserire le classi javascript. Possiamo modificare direttamente il codice HTML del layout del sito
(Blogger -> Modello -> Modifica HTML)
oppure possiamo creare un nuovo gadget con tutto il codice necessario - Entriamo nella directory Scripts dove abbiamo decompattato l'archivio e lanciamo il seguente comando:
$ cat sh*.js > SyntaxHighlighter.js
in questo modo creiamo un unico file, di qualche decina di KB, con tutto il codice javascript da includere nel nostro blog.
Volendo ridurlo di dimensione, possiamo includere solo i file con il codice strettamente necessario all'evidenziazziamento dei linguaggi che ci interessano. Ad esempio:
$ cat shCore.js shBrushCpp.js shBrushJava.js shBrushXml > SyntaxHighlighter.js
dato che i file shBrush*Linguaggio*.js contengono le definizioni necessarie al codice per evidenziare *Linguaggio*. - Andando in Blogger -> Layout, creiamo un nouvo gadget del tipo HTML/JavaScript dove inseriremo il seguente codice:
<script language="javascript"> *copia ed incolla* dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>Avendo cura di sostituire al posto di *copia ed incolla* il contenuto del file SyntaxHighlighter.js.
Nota: è necessario che il gadget sia collocato più in basso rispetto alla posizione nel layout del post. In questo modo la chiamata al metodo dp.SyntaxHighlighter.HighlightAll('code') avviene quando nella pagina è già presente il codice da evidenziare.
La chiamata al metodo dp.SyntaxHighlighter.BloggerMode() è necessaria per rimuover il tag <br/> che Blogger aggiunge automaticamente ad ogni fine riga. - Facciamo una prova:
/** * @author me */ public Prova(){ public static void main(String args[]){ String msg = "Ciao a tutti!"; System.out.println(msg); } }se il precedente codice viene evidenziato correttamente, allora SyntaxHightlighter è funzionante sul mio blog ;-)
Fine!
