How to use Syntax Highlighter

Categories:  Web
Labels:  html, javascript

Syntax Highlighter is a set of scripts developed in Javascript. It allows putting pieces of code in your Web (especially a blog), in this way, looking alike practically as if you were using one IDE.


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()
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">

Will render as:


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

  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)
      		// it works!

Will render as:


Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


Related Posts:
Social Profiles


This web accept cryptocoin donations
BTC address, LTC, ETH, Uphold:
Why donations?