Blog

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

  1. Scaricare l'ultima versione del software

  2. Estrarre i file contenuti in un archivio temporaneo (ad esempio sul Desktop)

  3. Caricare le directory Scripts e Styles sul server web

  4. 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>
  5. 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>

Solo gli utenti registrati possono lasciare commenti.

© Copyright ©2008-2019. Tutti i diritti riservati.