Se vogliamo inserire dei code snippet all'interno dei nostri post tecnici e vogliamo che questi siano facilmente leggibili non possiamo fare a meno di un formattatore di codice ed in questi casi due sono gli approcci possibili: css o css+javascript.
Inizialmente per i post di questo blog facevo affidamento sul code formatter on-line di Manoli che effettua l'highlight delle parole chiave esclusivamente tramite i css. L'utilizzo dei soli css però, soprattutto se vogliamo visualizzare anche i numeri di riga, introduce una quantità spropositata di tag ed impedisce il copia/incolla del codice "pulito".
Cercando sulla rete una valida alternativa a tale approccio mi sono imbattuto nella libreria SyntaxHighlighter.
SyntaxHighlighter è una libreria javascript "non intrusiva" che formatta il codice attraverso l'aggiunta di attributi class alle parole chiave in fase di caricamento del dom utilizzando le espressioni regolari.
Decido quindi di utilizzarla e seguo passo-passo le seguenti istruzioni:
- Scarico da Google Code la versione 1.5.1 di SyntaxHighlighter
- Salvo nella root del blog le cartelle Scripts e Styles
- Modifico il site.master del mio tema inserendo nell'head i riferimenti seguenti:
<link type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="/scripts/global.js" />
<script type="text/javascript" src="/scripts/shCore.js" />
<script type="text/javascript" src="/scripts/shBrushCSharp.js" />
<script type="text/javascript" src="/scripts/shBrushRuby.js" />
<script type="text/javascript" src="/scripts/shBrushXml.js" />
<script type="text/javascript" src="/scripts/shBrushJScript.js" />
<script type="text/javascript" src="/scripts/shBrushSql.js" />
- Inserisco poi in fondo alla pagina master il seguente snippet javascript:
</body>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
A questo punto decido di provare la libreria in un vecchio post nel quale avevo utilizzato del codice c#. Pulisco il pezzo di codice formattato con lo strumento precedente togliendo tutti i tag html e lo racchiudo in un tag <pre name="code" class="c-sharp"> come specificato dalle linee guida di SyntaxHighlighter.
Salvo e vado a vedere... il risultato: niente di niente, ovvero nessuna formattazione.
Osservando attentamente il codice html della pagina mi accorgo che il tag pre non ha più nè class nè name. Arrivo quindi alla conclusione che l'editor di BlogEngine.NET, il TinyMCE, pulisce il tag pre di tutti i suoi attributi prima di salvarlo.
Deciso a non mollare cerco di capire come aggirare il problema e trovo questo articolo che spiega brillantemente come utilizzare Syntax Highlighter con TinyMCE, ovvero modificando la funzione init dell'editor specificando quali sono i tag e i relativi attributi da considerare validi (e quindi da non rimuovere nel salvataggio).
In pratica vado nel controllo TinyMCE.ascx del BlogEngine.NET e modifco la proprietà extended_valid_elements della funzione init aggiungendo in fondo: pre[name|class].
And That's all folks!
