How to highlight the syntax by SyntaxHighlighter

A practical guide explaining how to use the class SyntaxHighlighter to post code snippets online through AJAX.

SyntaxHighlighter is a class, written in pure JavaScript code, which is necessary to highlight the code on the various programming languages: Html, C, CSharp, Css, Delphi, Java, Javascript, Php, Python, RubyOnRail, Sql, Visual Basic and Xml.

Installing SyntaxHighlighter

Download the latest version of the software
Extract the files in a temporary storage (for example, on the Desktop)
Load the directories Scripts and Styles on the web server

To enable, for instance, the syntax highlighting for PHP and XML code, insert the following lines in the <head> page to be highlighted:

<link rel="stylesheet" type="text/css" 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>

Insert the following lines before the closing tag </body> in the page to be highlighted:

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

Using highlighting features

To make the text of the page displayed correctly highlighted, use the following measures:

Enter the code to highlight between the two tag <pre> and </pre> or between the tags <textarea> and </textarea>.
Set the attribute name to "code" and the attribute class to one of the languages available (php, xml, etc.), as in the following extract code:
```
<pre name="code" class="php">
... the code should be inserted here ...
</pre>
```

Example use of SyntaxHighlighter

A page that achieves properly highlight syntax, could be similar to the following:

<!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>Sample of highlighted code</h1>
	<pre name="code" class="php">&lt;?php
echo "hello!";
?&gt;</pre>
</div>
<script type="text/javascript">  
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';   
dp.SyntaxHighlighter.HighlightAll('code');   
</script>
</body>
</html>

Notes

tags highligh syntax, SyntaxHighlighter php, highligh php code, script code

Publication details

Category: Javascript and AJAX

Published by: loryzz on date: 16.06.2008 16:10:03

Last edit by: loryzz on date: 17.06.2008 10:54:53

Statistics

This article has been viewed 4.812 times.

Send to

Ratings

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

Comments

2 user comments, 0 still waiting.

Comment by: Gary Woodfine on date: 12.02.2009 23:35:16

Thanks this is really awesome.
Comment by: loryzz on date: 13.02.2009 09:50:38

You are welcome :D

All comments must be approved by site administrator.
Please write comments on topic. Spam will be never approved.