Basic Steps
To get SyntaxHighlighter to work on you page, you need to do the following:
- Add base files to your page:
shCore.jsandshCore.css - Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
- Include
shCore.cssandshThemeDefault.css - Create a code snippet with either
<pre />or<script />method (see below) - Call
SyntaxHighlighter.all()JavaScript method
<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 (see configuration), which should be set as one of the brush aliases.
Here’s an example:
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!-- You also need to add some content to highlight, but that is covered elsewhere. -->
<pre class="brush: js">
function foo()
{
}
</pre>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
Will render as:
<pre class="brush: js">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</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:
- 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. - If you include a closing script tag, eg
</script>, even inside CDATA block, most browsers will incorrectly close<script type="syntaxhighlighter">tag prematurely.
This feature is new in 2.1 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 (see configuration), which should be set to as one of the brush aliases.
Here’s an example (Please note necessary CDATA tag):
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>
Will render as:
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}