Pagine

venerdì 24 settembre 2010

Come inserire codice php, html, javascript ... formattato in un post di Blogger

Già dal primo post mi sono scontrato con la necessità di aggiungere dei frammenti di codice. Il normale utilizzo del tag <pre> rende la lettura di grossi blocchi di codice al più difficoltosa.
Per fortuna esiste SyntaxHighlighter, uno script veramente utile e di semplicissima implementazione che permette di visualizzare il codice con la sintassi evidenziata, i numeri di riga e tutto quello che permette una maggiore leggibilità dello stesso.
Lo script può essere usato in qualsiasi ambiente (non esclusivamente blogger) ed esistono già plugin per alcune delle piattaforma blog più diffuse.
Per inserirlo in blogger è sufficiente aggiungere al modello ( Design / Modifica HTML ) subito prima del tag </body>

<!-- Inizio SyntaxHighlighter -->
<link href='http://IL TUO DOMINIO/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>  
<link href='http://IL TUO DOMINIO/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>  
<script src='http://IL TUO DOMINIO/scripts/shCore.js' type='text/javascript'/>  
<!-- Elenco brushes, in questo caso per CSS, JavaScript, SQL, XML e PHP --> 
<script src='http://IL TUO DOMINIO/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://IL TUO DOMINIO/scripts/shBrushCss.js' type='text/javascript'/>  
<script src='http://IL TUO DOMINIO/scripts/shBrushJScript.js' type='text/javascript'/>  
<script src='http://IL TUO DOMINIO/scripts/shBrushSql.js' type='text/javascript'/>  
<script src='http://IL TUO DOMINIO/scripts/shBrushXml.js' type='text/javascript'/>  
  
<script class='javascript'>  
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!--FINE SyntaxHighlighter -->  

Gli script/CSS fanno riferimento alle cartelle che contengono i file e che devono essere esterni a Blogger (che non fornisce uno spazio web dove uplaodare files oltre a Picasa). E' possibile scaricare i files dalla pagina di download di SyntaxHighlighter o usare quelli gentilmente offerti in hosting gratuito dal creatore dello script (in questo caso sostituire a IL TUO DOMINIO il percorso alexgorbatchev.com/pub/sh/current )

A questo punto non resta che inserire nei nostri post il codice da formattare usando il marcatore <pre> con una sintassi simile (in questo caso per un blocco php).

<pre class="brush:php">
<?php
echo('Ciao mondo');
?>
</pre>

Sarà lo script, una volta caricato, ad occuparsi della conversione! facile, rapido ed indolore.
L'unico accorgimento richiesto è l'utilizzo di &lt; e &gt; al posto di < e > all'interno del codice (basta fare il "copia/incolla" del codice nell'editor WYSIWYG di blogger).

Per maggiori opzioni/funzionlità fare riferimento alla pagina di configurazione di SyntaxHighlighter

Nessun commento:

Posta un commento