语法高亮自动加载器答案

【问题标题】：Syntaxhighlighter autoloader语法高亮自动加载器
【发布时间】：2011-03-28 13:27:32
【问题描述】：

我从http://alexgorbatchev.com/SyntaxHighlighter/ 获得了 SyntaxHighlighter

我无法让自动加载器工作。我做错了什么？

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

我已确保我的网址/脚本路径正确。

这行得通，但我真的很想让自动加载器工作。

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

【问题讨论】：

标签： javascript syntax-highlighting

【解决方案1】：

要使“SyntaxHighlighter.autoloader”正常工作，您应该移动“pre”部分下的行或将其放入文档准备好的回调中。

“autoloader”方法检查当前加载的“pre”部分并请求相应的画笔。所以如果在body元素加载之前执行，就不会加载画笔。

【讨论】：

【解决方案2】：

我的回答涉及撰写本文时的最新版本 SyntaxHighlighter，即 3.0.83 版。

我也遇到了这个问题，然后我尝试了 autoloader 函数的替代语法，即使使用相对路径它也对我有用。请将以下代码放在页面底部下面所有<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>

请注意，SyntaxHighlighter website here 上有关替代语法的文档目前错误。它建议您在数组中放入一个数组，并且您必须使用完整路径。两者都是误导性陈述，因为以下内容不起作用并且也不会引发错误：

SyntaxHighlighter.autoloader([ [ 'alias1', 'alias2', '/full/path/to/brush.js' ] ])

事实是，要使用您刚刚放入一系列数组的替代语法（不需要父数组！），就像这样并且可以有相对或绝对路径：

SyntaxHighlighter.autoloader([ 'alias1', 'alias2', 'path/to/brush.js' ], [ 'alias1', 'alias2', 'path/to/brush2.js' ]),

此外，我必须指出，我在使用未缩小版本的 SyntaxHighlighter（与 SyntaxHighlighter 捆绑在一起的 src 文件夹下的文件）时遇到了问题。它要求XRegExp 库，可以在这里下载：http://xregexp.com/。然而，即使在包含这个库之后（由于某种原因 not 需要包含在缩小版本中 - 我知道这很奇怪！）代码仍然抛出错误。综上所述，我使用了缩小版（在scripts目录下）没有问题。

为了完成这个答案，这里是我完整的 SyntaxHighlighter 自动加载器代码：

<!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>

【讨论】：

【解决方案3】：

试试：

<script type="text/javascript">
    window.onload = function ()
    {
        SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
        SyntaxHighlighter.all();
    }
</script>

【讨论】：

【解决方案4】：

对于以后阅读本文的人来说，由于某种原因，shAutoloader.js 脚本的路径被锁定在...

意思是如果你想让它自动加载，你必须把它放在这个特定的路径中： js/syntaxhighlighter/shAutoloader.js 以及其他语言脚本。

这很愚蠢，但如果有人知道如何解决这个问题，请告诉我：D

【讨论】：

这不是事实，我已经对此进行了测试，它适用于任何类型的相对路径。我还分析了源代码，没有您建议的特定路径约定

【解决方案5】：

    <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>
</head>
<body>


<pre class="brush: js">
function foo()
{
}
</pre>


    <script type="text/javascript">
        SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
        SyntaxHighlighter.all();
    </script>
</body>
</html>

【讨论】：

请详细说明你的答案，指出哪里出了问题，应该怎么做。