Skip to content

test

Proviamo Google Code Prettify in Blogger

Nel precedente post ho provato Sintaxhighlighter,
oggi mi va di provare Google Code Prettify.

L’inclusione in Blogger dovrebbe essere semplice come inserire i seguenti due tag
nel header del template in uso:

<link href=’http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/src/prettify.css’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://google-code-prettify.googlecode.com/svn/branches/release-1-Jun-2011/src/prettify.js’ type=’text/javascript’/>

Ovviamente, ricordiamoci di richiamare lo script aggiungendo al tag body l’evento onload=’prettyPrint();’

Vediamo se funziona:

/**
 * @author me
 */
public Prova(){
   public static void main(String args[]){
      String msg = "Ciao a tutti!";
      System.out.println(msg);
   }
}

Inserire del codice da evidenziare è semplicissimo, basta che sia racchiuso fra i tag:
<pre class="prettyprint">...</pre> oppure <code class="prettyprint">...</code>

Prettify dovrebbe essere in grado di riconoscere automaticamente la sintassi del codice da evidenziare. Volendo, si può può comunicare a Prettify il linguaggio esatto aggiungendo il tag che contiene il codice ad una classe di riferimento.
Nel mio esempio ho usato la classe lang-java:
<pre class="prettyprint lang-java">
Per maggiori informazioni date uno sguardo al README.

Code highlighter in Blogger

Volendo realizzare un blog dedicato al mondo dei computer e della programmazione, si rende necessario l’uso di un sistema per presentare il codice all’interno dei posts in maniera elegante.

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:

  1. Scarichiamo syntaxhighlighter dalla pagina del progetto e decompattiamo l’archivio
  2. 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.
  3. Andando nel pannello designer di Blogger
    (Blogger -> Modello -> Personalizza -> Avanzato -> aggiungi css)
    possiamo fare copia ed incolla del contenuto del file SyntaxHighlighter.css 
  4. 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
  5. 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*.
  6.  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.

  7. 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 😉

Per le istruzioni d’uso vi rimando al wiki del progetto.

Fine!