Tutto il necessario lo potete trovare al seguente link: SyntaxHighlighter
In questo post descriverò brevemente come si aggiunge questa funzionalità all'interno di Blogger, il sito usato per creare dei blog gratuiti, anche se il procedimento può essere contestualizzato in altri siti, ad esempio Wordpress.
Come prima cosa occorre accedere a Blogger con credenziali amministrative e premere il link in alto a destra che riporta la voce "Design" (si trova vicino al link "Esci").
Selezionate dal menu a sinistra "Modello" e il tasto "Modello HTML" nel riquadro "Live su Blog" per visualizzare la master page del blog.
Quindi aggiungete le seguenti righe di codice subito dopo il tag <head>:
<!--SYNTAX HIGHLIGHTER BY MBT STARTS--> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <!--SYNTAX HIGHLIGHTER BY MBT ENDS-->
Se si desidera nascondere il punto di domanda che si trova in alto a destra inserire il seguente codice poco prima del </head>:
<script type="text/javascript">
SyntaxHighlighter.defaults.toolbar = false;
</script>
Una volta completate le modifiche sarete in grado di formattare il codice aggiungendo all'interno della pagina il seguente html:
<pre class="brush: html"> <!-- codice html--> </pre>
L'elenco completo dei brushes si possono vedere a questo link: brushes
