Syntax Highlighting Mediawiki

 

Syntax Highlighting Mediawiki – visulizzare codice sorgente

A volte c’è la necessità di voler visualizzare il codice sorgente di un linguaggio di programmazione sul proprio Blog oppure wiki.

Il problema di solito è, che il codice sorgente copiato/inserito sul sito, viene visualizzato/formattato come un semplice file di testo e cosi la leggilibilità del codice sorgente ne risente parecchio, oltre a risultare bruttino come aspetto. La soluzione di questo problema si chiama „Syntax Highlighting“.

 

Syntax Highlighting Mediawiki

“Hello World” syntax highlighted

 

Estensione „GeSHi SyntaxHighlight“ per MediaWiki

 

Avevo bisogno di visualizzare del codice sorgente, soprattutto per i linguaggi C++, PHP e JavaScript sul wiki. Dopo un veloce confronto dei syntax highlighter disponibili per Mediawiki, ho scelto il Geshi perchè supporta la sintessi di un sacco di linguaggi.

 

Problemi con Mediawiki 1.17.x e GeSHi 1.0.8.10

Il motivo per cui scrivo queste righe? Perchè ho perso tanto tempo per provare a far funzionare (non funzionare) l’estensione GeSHi con la versione 1.17.x di Mediawiki. Il problema era: la sintesi del linguaggio non mi veniva riconosciuta, invece compariva sempre un avviso di errore, tipo „Linguaggio non riconosciuto….“ . Secondo me, lo sviluppo di Mediawiki e GeSHi non va proprio di mano in mano. Anyway…

Per tutti gli interessati c’è la Bug Review di Mediawiki Code Review – MediaWiki

Dopo tanto tempo perso inutilmente ho deciso di cambiare rotta.

 

Syntax Highlighting Mediawiki – Step UNO

La versione di Mediawiki utilizzata da me, la 1.17.0, mi risultava incombatibile anche con un’altra estensione che volevo utilizzare, la Math, tanto valeva fare quel benedetto update di versione. Ho scelto la 1.19.11, una delle ultime disponibili, “stable” non “beta”.

 

Update MediaWiki da 1.17.0 a 1.19.11 download Mediawiki

 

Ho eseguito il backup dei file e del database come consigliato sul sito di mediawiki. In effetti basterebbe conservare solo la cartella „images“ dove si trovano tutte le immagini utilizzate/caricate del wiki e la cartella „extensions“ con tutte le estensioni usate. Nel mio caso ho riutilizzato anche i file .css del tema che uso (cartella „skins“) perchè avevo modificato l’aspetto della Sidebar.

Su come caricare i file dell’upgrade sul server?…..qui ogniuno può sceglere il metodo che li piace di più. Io l’ho caricati tramite FTP, sovrasrivendo i vecchi file.

Poi ho lanciato la „Web Updater“ eseguendo la cartella „mw-config“, cioè per es. http://www.mioblog.it/cartella_di_mediawiki/mw-config et voilà.

 

mediawiki update procedura

Procedura guidata per l’update di MediaWiki

 

Syntax Highlighting Mediawiki – Step DUE

Dopo l’upgrade del wiki volevo rimettere solo Geshi come unica estensione, quando per caso ho trovato un sito che offre il download di un intera collezione di estensioni per mediawiki, inclusa anche la Math tanto ricercata da me.

 

mediawiki extensions

Una volta estratti i file, le singole estensioni sono da piazzare nella cartella „extensions“ del proprio wiki.

A questo punto i due passaggi chiave sono:

modificare il file LocalSettings.php del wiki, aggiungendo le righe sotto riportate, alla fine del file.

LocalSettings.php

 

creare il file Geshi.css su Mediawiki, digitando l’indirizzo ( :!: mioblog e cartella di mediawiki sono da sostituire con il vero percorso del file) http://www.mioblog/cartella_di_mediawiki/index.php?title=MediaWiki:Geshi.css

Questa pagina di Mediawiki, se si accede per la prima volta, è ancora vuota. Bisogna fare il „Login“ e modificarla, copiando il testo sotto riportato, per poi salvare il tutto.

MediaWiki.Geshi.css

 

Syntax Highlighting Mediawiki – Step ULTIMO

 

Se le modifiche fatte non sono subito visibili, bisogna svotare il cache del browser, oppure come ho fatto io, risalvare il file „LocalSettings.php“ sul server. Magari facendo una piccola modifica, p. es. inserendone una riga vuota con il tabulatore.

 

Lo spunto per chi ne avesse bisogno:

 

Una volta installata l’estensione, sono rimasto colpito dalla facilità di uso e dall’aspetto del codice sorgente, perfetto. A tal punto ho iniziato a crearmi un „Code Repository“, cioè un banco dati con tanti „snippets“ di codice sorgente che mi si è accumulato negli ultimi anni, disperso da qualche parte sul disco rigido. Per esempio, la pagina si chiama „codice“ la sottopagina si chiama „codice linguaggio Python“ e l’ultimo link, magari si chiama „Codice per Webclient in Python“ dove si trova la pagina con il codice e la sintessi perfetta, pronti per essere utilizzati copiati altrove. It’s magic. ;)

 
 

L’autore del blog

Werner Schrottenbaum è un appassionato di tecnologia e innovazione. Per scoprire di più, seguilo su Twitter e Google+.

Leave a comment




Allowed HTML Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="" class="" title="" data-url=""> <span class="" title="" data-url="">


Datalogger fotovolta

  Datalogger fotovoltaico con Linux     Ho un'amico, che utilizza per fare il ...

Raspberry Pi visuali

  Raspberry Pi visualizzare grafici Sono "addicted" di andamenti grafici, secondo me ...

Raspberry Pi porta s

  Raspberry Pi porta seriale   Per chi come me, viene dall'automazione industriale, ...

Raspberry Pi misurar

  Raspberry Pi misurare temperatura     Ci sono tanti modi per misurare consumi ...

Raspberry Pi convert

  Raspberry Pi convertitore A/D   Oggi vi presento un modulo A/D con ...

Datalogger fotovolta

  Datalogger fotovoltaico con Linux     Ho un'amico, che utilizza per fare il ...

Raspberry Pi visuali

  Raspberry Pi visualizzare grafici Sono "addicted" di andamenti grafici, secondo me ...

Raspberry Pi porta s

  Raspberry Pi porta seriale   Per chi come me, viene dall'automazione industriale, ...

Raspberry Pi misurar

  Raspberry Pi misurare temperatura     Ci sono tanti modi per misurare consumi ...

Raspberry Pi convert

  Raspberry Pi convertitore A/D   Oggi vi presento un modulo A/D con ...