Blogger + SyntaxHighligther + Bootstrap

15:01:00

Premessa
Come avrete notato da qualche settimana ho aggiornato il layout del blog. Questo nuovo layout è dinamico e basato sul classico Bootstrap. Da anni uso il plugin Javascript di Alex Gorbatche, SyntaxHighlighter per poter renderizzare il codice sorgente. E' un ottimo strumento che si adatta bene anche alla piattaforma Blogger di Google. Peccato che il mix dei tre componenti: Blogger + SyntaxHighlighter + Bootstrap non vadano molto d'accordo. Sembra infatti che il contenuto del post sia caricato successivamente al Javascript.

Workaround parziale
L'idea di fondo per garantire il funzionamento dei vari componenti è quello di ritardare il rendering del codice sorgente contenuto nei post. La soluzione non è certo delle più eleganti visto che si introduce un ritardo programmatico e cementato nel codice ma per adesso è la soluzione più indolore e facile che abbia trovato.

1. Aggiungere i CSS di SyntaxHighlighter nell'head del documento:

< link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/ > 
< link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/ >

2. Aggiungere i Javascript per i brashes disponibili in fondo alla pagina, appena prima la chiusura del tag body
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushBash.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js' type='text/javascript'/ >
< script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushScala.js' type='text/javascript'/ >
 
< script language='javascript' type='text/javascript' >
  SyntaxHighlighter.config.bloggerMode = true;
         
  // set timeout and iterate through the appropriate html items
  window.setTimeout(function() {
    jQuery( "pre" ).each(function( index ) {
    SyntaxHighlighter.highlight(undefined, jQuery( this ).get(0));
   });
  }, 3000);
  < /script >

Osservazioni finali
Il timeout dovrebbe essere funzione del broswer e della connessione, cosa che evidentemente non va bene per essere una soluzione stabile nel tempo.
La funzione jQuery analizza tutti i tag pre, dando per scontato che i tag pre vengano utilizzati solo per SyntaxHighlighter, cosa che non è necessariemente vera. Questa limitazione potrebbe corrompere alcuni layout.

Call to action
Se avete delle soluzioni migliori vi prego di condividerle.
Fonte
Ulises Fasoli

You Might Also Like

0 commenti