SyntaxHighlighter Autoloader(自动加载)最优方式
SyntaxHighlighter是代码高亮工具,支持多种语言。一次性加载全部语言配置文件影响效率,官方提供shAutoloader.js实现按需加载。通过path函数和autoloader配置,可灵活使用pre或textarea标签展示代码。进一步优化:后端或前端判断页面是否存在代码块,再决定是否加载脚本,实现按需加载。
一、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 放进来:然后在


































