SyntaxHighlighter 3.0.83

Fork Me On GitHub
whats new?
SyntaxHighlighter is an open source Java Script client side code syntax highlighter.
donate download installation autoloader configuration @syntaxhighlight

Installation

Basic Steps

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

  1. Add base files to your page: shCore.js and shCore.css
  2. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
  3. Include shCore.css and shThemeDefault.css
  4. Create a code snippet with either <pre /> or <script /> method (see below)
  5. 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 &lt; 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:

  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="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!
      	}