Menu
I got the SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/
I cant get the autoloader to work. What am I doing wrong?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
I've made sure that my urls/script paths are correct.
This works, but I'd really like to get the autoloader working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shBrushJScript.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
340
asked Apr 17 '26 23:04
To make "SyntaxHighlighter.autoloader" work, you should move the line under your "pre" sections or put it into document ready's callback.
The "autoloader" method checks current loaded "pre" sections and requests corresponding brushes. So if it's executed before the body element loaded, no brush will be loaded.
157
answered Apr 19 '26 12:04
My answer deals with the latest version of SyntaxHighlighter at the time of writing, which is version 3.0.83.
I was also having this problem and then I tried the alternative syntax for the autoloader function and it worked for me even with relative paths. Please put the following code at the bottom of your page below all your <pre> tags:
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
Please note that the documentation about the alternative syntax on the SyntaxHighlighter website here is currently wrong. It suggests that you put in an array within an array and also that you must use full paths. Both are misleading statements because the following does not work and no error is thrown either:
SyntaxHighlighter.autoloader([ [ 'alias1', 'alias2', '/full/path/to/brush.js' ] ])
The truth is that to use the alternative syntax you just put in a series of arrays (no parent array is required!), like so and can have relative or absolute paths:
SyntaxHighlighter.autoloader([ 'alias1', 'alias2', 'path/to/brush.js' ], [ 'alias1', 'alias2', 'path/to/brush2.js' ]),
Additionally, I must note that I had a problem with using the unminified version of SyntaxHighlighter (the file under the src folder bundled with SyntaxHighlighter). It was asking for the XRegExp library which can be downloaded here: http://xregexp.com/. However, even after including this library (which for some reason does not need to be included in the minified version - very strange I know!) the code was still throwing errors. In summary, I used the minified version (available under the scripts directory) with no problems.
To finish off this answer, here is my fully working SyntaxHighlighter autoloader code:
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello SyntaxHighlighter</title>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
</head>
<body style="background: white; font-family: Helvetica">
<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
