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

Post details

Category: Javascript and AJAX

Posted by: loryzz on: 16.06.2008 16:10:03

Last changed by: loryzz on: 17.06.2008 10:54:53

Statistiche

This article was displayed 3 times.

Social Bookmarks

Votazioni

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

Commenti

Site users have issued 2 comments, which 0 awaiting approval.

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

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

You are welcome :D

All comments must be approved by the admin before being publicly displayed. This is merely a preventive measure against spam/advertisements - there is no need to resubmit.
Please keep comments appropriate and on topic. Spam is never approved.