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

  1. Download the latest version of the software

  2. Extract the files in a temporary storage (for example, on the Desktop)

  3. Load the directories Scripts and Styles on the web server

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

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

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" "">
<html lang="it" xml:lang="it" xmlns="">
	<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>

<div id="content">
	<h1>Sample of highlighted code</h1>
	<pre name="code" class="php">&lt;?php
echo "hello!";
<script type="text/javascript">  
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';   


  1. Gary Woodfine12 February 2009, 23:35:16

    Thanks this is really awesome.

  2. Loris.genetti13 February 2009, 09:50:38

    You are welcome :D


Only registered users can leave comments.

© Copyright ©2008-2018. All Rights Reserved.