SyntaxHighlighter Autoloader(自动加载)最优方式

一、SyntaxHighlighter介绍

代码高亮这事儿，说大不大，说小不小。SyntaxHighlighter 算是一代经典了，专门用来在网页上给代码上色，支持的语言范围相当广——HTML、CSS、Ja vaScript 这些前端基础语种自不必说，C、Ja va 这些后端编程语言也在射程之内。你随便翻翻现在网上很多技术文章里那些带颜色的代码块，背后可能跑的就是它。具体来说，它能加亮的语言包括：C#、CSS、C++、Delphi、Ja va、Ja vaScript、PHP、Python、Ruby、SQL、Visual Basic、XML/HTML……基本上主流语言都覆盖了。

不过话说回来，这工具好用是好用，但有个实际的问题：不同文章里出现的代码语言往往各不相同。如果为了兼容所有情况，一次把全部语言的配置文件都加载进来，页面加载的东西可就太多了。所以，SyntaxHighlighter 官方提供了一个 shAutoloader.js 脚本，专门用来按需加载——这才是真正的高效之道。

二、使用教程

先说第一步，把下载下来的 SyntaxHighlighter 文件解压，然后只保留 Scripts 和 styles 这两个文件夹，其他杂七杂八的可以扔掉。

接着是引入样式文件和脚本。在页面的 之间，把 CSS 放进来：

然后在 结束标签的前面，引入 Ja vaScript 文件——这里就有讲究了，既要 shCore.js，也要 shAutoloader.js：

这段脚本里，核心是那个 path() 函数和后面的 autoloader 调用。path 函数的作用说白了就是个路径拼接器——把你传入的语言别名替换成真实脚本地址。autoloader 则负责按需加载，什么语言出现在页面上，就加载对应的 Brush 文件。下面那一堆 defaults 配置项也很关键：gutter 控制是否显示行号，toolbar 决定是否显示工具栏，auto-links 和 quick-code 则分别控制自动链接和代码快速复制功能，根据需求开关就行。

三、使用方法

配置好了，怎么用？有两种主流方式。

方式一：用 pre 标签

//这里是你需要高亮的代码

//python代码

前者是经典写法，直接通过 class 指定语言；后者则是套了一个容器 div，方便统一控制样式。

方式二：用 textarea 标签

//这里是你需要高亮的代码

textarea 的好处是不会额外处理里面的特殊字符，对于包含大量<、>、&等符号的代码片段来说，更不容易出问题。

四、高级技巧：按需加载

但现实情况是，文章详情页并不总是有代码块。很多页面可能就是纯文字，如果关了 JS 还去加载一堆高亮脚本，那就是浪费带宽了。所以更好的做法是加一个判断：只有当页面上确实存在代码块时，才去加载这些 JS 文件和执行初始化。

如果你用的是类似 ASP.NET MVC 的 Model 框架，可以在视图里这样写：

var isCode = Model.Html.ToString().Contains("
没有框架的话，用 jQuery 判断也完全可以：
if($('div.jb51code').length > 0){
    // 这里放置上面的js文件链接以及js代码。
}
第一种方法是后端判断，在生成页面 HTML 的时候就决定要不要引脚本；第二种是前端判断，页面加载完去检查 DOM 里有没有代码块元素。两种各有适用场景，看你的项目结构选就行。这才是真正做到了“按需加载”，不浪费一丝一毫的资源。