Prototype loader for SyntaxHighlighter

Skip to setup or usage

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript (as stated on its wiki). One of its deficiencies is that it retrieves all its brushes each time a page is loaded, despite the fact that in many cases only one or two (or none) are required.

Currently, Prototype is my JavaScript framework of choice (although I'm really looking forward to trying jQuery). I have used Prototype to create a brush loader for SyntaxHighlighter, which retrieves brushes on demand to reduce page loading times (in certain circumstances).

Setup

Requires Prototype!

If you are not already using Prototype on your site, I recommend using SyntaxHighlighter in the conventional manner, since there is significant overhead associated with loading prototype.js.

If you are using Prototype, follow these steps to have brushes retrieved dynamically:

1. Download loader.js (≈4.9 kB) or the minified and gzipped version (≈1.2 kB) and upload it to your SyntaxHighlighter scripts directory.

2. Replace:

   <script type="text/javascript" src="/path/to/scripts/shCore.js"></script>
   <script type="text/javascript" src="/path/to/scripts/shBrushAS3.js"></script>
   <script type="text/javascript" src="/path/to/scripts/shBrushBash.js"></script>
   .
   .
   .
   <script type="text/javascript" src="/path/to/scripts/shBrushVb.js"></script>
   <script type="text/javascript" src="/path/to/scripts/shBrushXml.js"></script>
   
   <script type="text/javascript">
       SyntaxHighlighter.all();
   </script>
   

   with:

   <script type="text/javascript">
       function Brush(name, filename, aliases)
       {
           this.name = name;
           this.filename = filename;
           this.aliases = aliases;
       }
       var settings = {
           selector: 'head',
           path: 'http://example.com/sh/',
           stylesheets: ['shThemeDefault'],
           brushes: [],
           extensions: { stylesheet: 'css', brush: 'js' },
           defaults: {}
       };
   </script>
   <script type="text/javascript" src="/path/to/scripts/loader.js"></script>
   

3. Replace both instances of http://example.com/sh/ in the above snippet with the path to your SyntaxHighlighter directory.

Usage

The settings object provides flexibility by allowing various things to be modified or included.

Selector. By default, settings.selector is set to 'head', which means that script elements will be inserted into the head element. This can be replaced with any CSS selector to have script elements inserted into a different element.

Style sheets. By default, settings.stylesheets is an array containing just the default style sheet. This can easily be modified:

stylesheets: ['shThemeCoda', 'shThemeAppleScript'],

Brushes. By default, settings.brushes is an empty array. All the bundled brushes are handled automatically, but additional brushes can be included by adding them to this array:

brushes: [
    new Brush('AppleScript', 'shBrushAppleScript', ['applescript'])
],

When creating a Brush object, provide the constructor with the brush's name, its file name (sans extension), and an array of aliases.

Extensions. By default, settings.extensions has 'css' set against stylesheet and 'js' set against brush. It is useful to be able to change these values if, for example, gzipped versions of the brushes are to be used.

Defaults. SyntaxHighlighter defaults can be set by modifying settings.defaults:

defaults: {
    'auto-links': false,
    'html-script': true
}

Many thanks to Dan Breslau for letting me know about SyntaxHighlighter.highlight() and for his thorough testing of each of the early iterations of this code. Dan's SyntaxHighlighter improvements are well worth a look!

Respond