Home > JavaScript, Software Development, Web Development > SyntaxHighlighter brush autoloading

SyntaxHighlighter brush autoloading

Wednesday, June 15th, 2011

SyntaxHighlighter is a very cool syntax highlighting JavaScript library created by Alex Gorbatchev (if you don’t know about it yet, check out the demo page). As you’ll notice, I actually use it on this very blog.

Using it is pretty straightforward:

  • load the XRegexP library required by SyntaxHighlighter: http://xregexp.com/

  • load the main script:

    <script src="js/shCore.js" type="text/javascript"></script>
  • load one or more of the available brushes (syntax highlighting scripts):

    <script src="css/shBrushJScript.js" type="text/javascript"></script>
  • include at least one of the available theme stylesheets:

    <link href="css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css"/> 
  • wrap the code to highlight in a <pre> block and specify the brush that should be used:

                 <pre class="brush: js">function foo(){ ... }</pre>
  • finally, execute the highlighter using the following:

                 <script type="text/javascript">

The main issue with this way of configuring SyntaxHighlighter is that you’ll either have to load exactly those brushes you need or load them all even if they’re not needed. This problem remained until version 3 introduced the Autoloader script.

You can find all the details about its usage on that page, but basically you have to load the autoloader script and tell it about all the brushes aliases that it should recognize along with the path to the corresponding scripts. Much better, yay!

One problem I’ve had with the autoloader script is that it doesn’t seem to appreciate URIs for the location of the brush scripts when using the default syntax:

Array: [ 'alias1 alias2 /full/path/to/brush.js', ... ]

Although, it works perfectly fine when using the alternate syntax (which is alas a little bit more verbose):

Array: [ [ 'alias1', 'alias2', '/full/path/to/brush.js' ], ... ]

Finally, I’ve come up with the following script, largely inspired by the example on that page but using the alternate syntax:

	<script type="text/javascript"> 
		var baseSyntaxHighlighterScriptsPath = "http://base-path-to-scripts-folder/";
		function getSyntaxHighlighterScriptPath(name){
			return name.replace('@', baseSyntaxHighlighterScriptsPath);
			[ 'applescript', getSyntaxHighlighterScriptPath('@shBrushAppleScript.js') ],
			[ 'actionscript3', 'as3', getSyntaxHighlighterScriptPath('@shBrushAS3.js') ],
			[ 'bash', 'shell', getSyntaxHighlighterScriptPath('@shBrushBash.js') ],
			[ 'coldfusion', 'cf', getSyntaxHighlighterScriptPath('@shBrushColdFusion.js') ],
			[ 'cpp', 'c', getSyntaxHighlighterScriptPath('@shBrushCpp.js') ],
			[ 'c#', 'c-sharp', 'csharp', getSyntaxHighlighterScriptPath('@shBrushCSharp.js') ],
			[ 'css', getSyntaxHighlighterScriptPath('@shBrushCss.js') ],
			[ 'diff', 'patch', 'pas', getSyntaxHighlighterScriptPath('@shBrushDiff.js') ],
			[ 'erl', 'erlang', getSyntaxHighlighterScriptPath('@shBrushErlang.js') ],
			[ 'groovy', getSyntaxHighlighterScriptPath('@shBrushGroovy.js') ],
			[ 'java', getSyntaxHighlighterScriptPath('@shBrushJava.js') ],
			[ 'jfx', 'javafx', getSyntaxHighlighterScriptPath('@shBrushJavaFX.js') ],
			[ 'js', 'javascript', 'jscript', getSyntaxHighlighterScriptPath('@shBrushJScript.js') ],
			[ 'perl', 'pl', getSyntaxHighlighterScriptPath('@shBrushPerl.js') ],
			[ 'php', getSyntaxHighlighterScriptPath('@shBrushPhp.js') ],
			[ 'text', 'plain', getSyntaxHighlighterScriptPath('@shBrushPlain.js') ],
			[ 'py', 'python', getSyntaxHighlighterScriptPath('@shBrushPython.js') ],
			[ 'ruby', 'rails', 'ror', 'rb', getSyntaxHighlighterScriptPath('@shBrushRuby.js') ],
			[ 'sass', 'scss', getSyntaxHighlighterScriptPath('@shBrushSass.js') ],
			[ 'scala', getSyntaxHighlighterScriptPath('@shBrushScala.js') ],
			[ 'sql', getSyntaxHighlighterScriptPath('@shBrushSql.js') ],
			[ 'vb', 'vbnet', getSyntaxHighlighterScriptPath('@shBrushVb.js') ],
			[ 'xml', 'xslt', 'html', 'htm', getSyntaxHighlighterScriptPath('@shBrushXml.js') ]
If you enjoyed this post, make sure you subscribe to my RSS feed!


  1. I think this could be inefficient because you are basically calling the getSyntaxHighlighterScriptPath function several times. On the example page the function is called only once but using a loop for going trough all the paths.

    Comment by Leonard — 2013-04-18 @ 17:40
  2. True :)

    Comment by Sébastien — 2013-04-18 @ 21:36
  3. I guess with some workaround you can adapt that function to your needs ;)

    Comment by Leonard — 2013-04-18 @ 22:09
  4. Yep indeed, I’d just need to adapt the code so that the array given to the autoloader already has the correct URIs defined.

    Something like
    var addons = … // super array with ‘@’ placeholders
    // for loop that goes through each of the array entries and replaces the ‘@’ placeholder


    If only I had more time on my hands ;-)

    Comment by Sébastien — 2013-04-19 @ 06:43

RSS feed for comments on this post. TrackBack URL

Leave a comment