SyntaxHighlighter, evidenziare i codici degli script

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

SyntaxHighlighter (alla lettera evidenziatore di sintassi) è una utility Javascript il cui scopo è consentire ai gestori di siti didattici sulla programmazione di mostrare a video codici di esempio ben formattati ed evidenziati in modo corretto, al fine di renderli più leggibili, colorando la sintassi ed enumerando le righe.

Programmato per soddisfare una vasta gamma di esigenze in termini di linguaggi sia orientati al Web (HTML, CSS, Javascript, PHP, XML, etc...) che non (VB, C#, C++, Delphi, Java etc...) SyntaxHighlighter è una libreria molto leggera e versatile che consente di includere due "core" di base (Javascript e CSS), quindi le singole librerie per evidenziare i codici di determinati linguaggi, in modo da evitare un inutile dispendio di risorse.

SyntaxHighlighter

Lo screenshot sopra riportato raffigura un esempio di codice Javascript, ed uno PHP, gestiti con questa fantastica libreria.

Download ed installazione di SyntaxHighlighter

Per prima cosa effettuiamo il download di SyntaxHighlighter dal sito ufficiale.

Decomprimiamo la cartella compressa (possiamo rinominarla come SyntaxHighlighter, eliminando dal nome della cartella il numero di versione) e copiamola nella nostra cartella di prova, senza toccare nessuno dei file presenti in essa.

Sebbene le cartelle che ci interessano siano solo scripts e styles che, rispettivamente, contengono i file Javascript e CSS.

Per utilizzare SyntaxHighlighter nelle pagine del proprio sito è necessario richiamare la libreria principale, quindi la libreria del linguaggio/i che ci interessa trattare.

Includiamo, ad esempio, Javascript e PHP, oltre ovviamente al motore principale:

<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>

Per finire, includiamo il foglio di stile di base:

<link rel="stylesheet" type="text/css" href="syntaxhighlighter/styles/shCoreDefault.css">

All'interno della cartella "styles" possiamo scegliere il foglio di stile il cui contenuto stilizza il codice come meglio si addice ai nostri gusti.

Esecuzione di SyntaxHighlighter

Passiamo alla pratica con un esempio di codice Javascript da mostrare a video ai nostri navigatori.

Per prima cosa lanciamo il metodo all() dell'omonimo oggetto SyntaxHighlighter che agisce sul tag <pre>, dotato di un'apposita classe, come vedremo a breve.

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Vediamo quindi come gestire il tag <pre>, assegnandogli la classe contrassegnata dal comando brush che verrà valorizzato con la variabile che contraddistingue il linguaggio che intendiamo mostrare a video:

<!-- Valore js per la sintassi Javascript -->

<pre class="brush: js;">

</pre>

<!-- Valore php per la sintassi PHP -->

<pre class="brush: php;">

</pre>

e così via.

All'interno dei tag <pre> e </pre> scriveremo il codice che ci interessa esporre sulla nostra pagina.

Vediamo quindi il codice dell'esempio Javascript di cui al precedente screenshot:

<pre class="brush: js;">
&lt;script type="text/javascript"&gt;
var a = 5;
var b = 3;
if (a &gt; b)
{
	document.write("A è maggiore di B");
}
else if (a == b)
{
	document.write("A è uguale a B");
}
else
{
	document.write("A è minore di B");
}
&lt;/script&gt;
</pre>

Vediamo, in fine, il codice dell'esempio PHP di cui al precedente screenshot:

<pre class="brush: php;">
&lt;?PHP
	$a = 5;
	$b = 3;
	if ($a &gt; $b)
	{
		echo "A è maggiore di B";
	}
	else if ($a == $b)
	{
		echo "A è uguale a B";
	}
	else
	{
		echo "A è minore di B";
	}
?&gt;
</pre>

Ricordiamo sempre che i simboli "minore" e "maggiore" (che contrassegnano i tag HTML, piuttosto che i tag di render dei linguaggi lato server), vanno sostituiti con:

  • maggiore: &lt;
  • minore: &gt;

Valori brush di SyntaxHighlighter

Per conoscere tutti i possibili valori ed i nomi dei file Javascript che ci consentono di evidenziare correttamente i vari linguaggi, propongo la seguente tabella riepilogativa, tratta direttamente dal sito ufficiale del progetto.

BrushAliasFile
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (102.242)

:: Breve guida a jQuery (91.569)

:: Le espressioni regolari in Javascript (83.665)

:: Gestione delle stringhe in Javascript (71.316)

:: Stampare una pagina col Dhtml (41.898)

:: Menu orizzontale dinamico in Dhtml (36.148)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (35.972)

:: Gli Array in Javascript (34.971)

:: Temporizzazioni Javascript (30.269)

:: DOM: rendere cross-browser il comando innerHTML (27.634)

IN EVIDENZA
DOWNLOAD