Evidenziare la sintassi mediante SyntaxHighlighter

Guida pratica che illustra come utilizzare la classe SyntaxHighlighter per formattare il codice delle pagine web tramite AJAX.

SyntaxHighlighter è una classe, scritta in puro codice Javascript, necessaria per evidenziare del codice riguardante i vari linguaggi di programmazione: Html, C, CSharp, Css, Delphi, Java, Javascript, Php, Python, RubyOnRail, Sql, Visual Basic ed Xml.

Installazione di SyntaxHighlighter

Scaricare l'ultima versione del software
Estrarre i file contenuti in un archivio temporaneo (ad esempio sul Desktop)
Caricare le directory Scripts e Styles sul server web

Per abilitare ad esempio l'evidenziamento della sintassi per il codice PHP e XML, inserire le seguenti righe nella sezione <head> della pagina da evidenziare:

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
<script type="text/javascript" src="Scripts/shCore.js"></script>
<script type="text/javascript" src="Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="Scripts/shBrushXml.js"></script>

Inserire le seguenti righe prima della chiusura del tag </body> nella pagina da evidenziare:

<script type="text/javascript">  
dp.SyntaxHighlighter.ClipboardSwf = 'Scripts/clipboard.swf';   
dp.SyntaxHighlighter.HighlightAll('code');   
</script>

Utilizzo delle funzionalità di evidenziamento

Per fare in modo che il testo della pagina visualizzata venga evidenziato correttamente, utilizzare i seguenti accorgimenti:

Inserire il codice da evidenziare tra i due tag <pre> e </pre> oppure tra i tag <textarea> e </textarea>.
Impostare l'attributo name a "code" e l'attributo class ad uno dei linguaggi disponibili (php, xml, ecc), come nel seguente estratto di codice:
```
<pre name="code" class="php">
... il codice deve essere inserito qui ...
</pre>
```

Esempio di utilizzo di SyntaxHighlighter

Una pagina che realizzi correttamente l'evidenziamento della sintassi, potrebbe essere simile alla seguente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="it" xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Modifica articolo</title>
	<link rel="stylesheet" type="text/css" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" />
	<script type="text/javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
	<script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
</head>

<body>
<div id="content">
	<h1>Esempio di codice evidenziato</h1>
	<pre name="code" class="php">&lt;?php
echo "ciao";
?&gt;</pre>
</div>
<script type="text/javascript">  
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';   
dp.SyntaxHighlighter.HighlightAll('code');   
</script>
</body>
</html>

Note

tags evidenziare sintassi, SyntaxHighlighter php, evidenziare codice php, script codice, php, programmazione, syntaxhighlighter

Dettagli pubblicazione

Categoria: Javascript e AJAX

Pubblicato da: loryzz in data: 24.02.2008 23:52:37

Ultima modifica di: loryzz in data: 21.01.2009 10:57:08

Statistiche

Questo articolo è stato visualizzato 2.982 volte.

Segnala presso

Votazioni

Currently 0; ?>/ TOTALSTARS
1
2
3
4
5

Commenti

Gli utenti del sito hanno rilasciato 0 commenti, di cui 0 in attesa di approvazione.

Lascia un commento

Tutti i commenti devono essere approvati da un amministratore prima di essere visualizzati al pubblico. Si tratta di una misura preventiva contro spam e pubblicità e non è necessario reinviare il commento.
Si prega di scrivere commenti in tema. Spam e messaggi promozionali non vengono approvati.