Usage

These instructions apply to v4 and up. If you are looking for instructions for older version, please see the original manual.

💰 💰 💰 Please click here to donate via PayPal and just like they say on TV – give generously! It motivates me to keep working on this (12 years now and counting).

Basic Steps

To get SyntaxHighlighter to work on you page, you need to do the following:

1. Following the Building instructions to assemble your own syntaxhighlighter.js
2. Drop it on the page using a <script src="syntaxhighlighter.js" /> tag or follow the CommonJS usage instructions

<pre /> method

😀 ADVANTAGES 😀

Works everywhere, graceful fallback if there are script problems, shows up in all RSS readers as regular <pre />

😩 PROBLEMS 😩

Major issue with this method is that all right angle brackets must be HTML escaped, eg all < must be replaced with < This will ensure correct rendering.

SyntaxHighlighter looks for <pre /> tags which have a specially formatted class attribute. The format of the attribute is the same as the CSS style attribute. The only required parameter is brush.

Here’s an example:

<script type="text/javascript" src="syntaxhighlighter.js"></script>

<pre class="brush: js">
function foo()
{
}
</pre>

<script /> method

The benefit of this method is ability to place virtually anything inside the CDATA without having to escape anything*, so this allows for a straight 'cut and paste' experience from your favorite text editor.

😀 ADVANTAGES 😀

Doesn’t require escaping of the right angle bracket.

😩 PROBLEMS 😩

1. No fallback, <script /> tag is stripped out by most RSS readers, so if you are using SyntaxHighlighter on a blog, you are better off with the <pre /> method.
2. If you include a closing script tag, eg </script>, even inside CDATA block, most browsers will incorrectly close <script type="text/syntaxhighlighter"> tag prematurely.

SyntaxHighlighter looks for <script type="syntaxhighlighter" /> which have a specially formatted class attribute. The format of the attribute is the same as the CSS style attribute. The only required parameter is brush.

Here’s an example (Please note necessary CDATA tag):

<script type="text/javascript" src="syntaxhighlighter.js"></script>

<script type="text/syntaxhighlighter" class="brush: js"><![CDATA[
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>