为语法高亮插件 SyntaxHighlighter Evolved 进行优化

前面有一篇 用 SyntaxHighlighter Evolved 作为自已的代码加亮插件 介绍了 SyntaxHighlighter Evolved 插件。当前所用的版本是 2.3.8,  我现在是用 <pre class='brush:java'>code here</pre> 的形式来加亮代码,所以必须选上后台的 Load All Brushes 选项,用 [ code lang="js]code here[/code] 会动态的加载所需的 shBrushXxx.js 文件。后一种方式会有些问题,因而这里也是针对前一种方式来进行优化的,因为 Load All Brushes 选项一旦选上,页面将会依次:

<script type='text/javascript' src='...shBrushAS3.js?ver=2.1.364b'></script>
<script type='text/javascript' src='...shBrushBash.js?ver=2.1.364b'></script>
<script type='text/javascript' src='...shBrushColdFusion.js?ver=2.1.364b'></script>
..............................等等 27 个 shBrushXxx.js

不厌其烦的一大片来加载所有的 js,不选 Load All Brushes 的话,<pre> 中的代码是被该插件视而不见的。现在要对其进行的优化,主要从两个方面:

1) 把全部的 27 个 shBrushXxx.js 文件合并到一个 js 文件中,如 shBrushes.js,这样可以减少加载那些 js 时 HTTP 连接的消耗,如果是 Keep-Alive 还好些。

2) 对合并后的 shBrushes.js 文件进一步压缩,节约网络流量,有好的 js 压缩工具可以选择众多 js 文件压缩并合并。

在压缩时一定要注意等压缩的 js 文件中一条语句必须用分号结束,否则压缩后会出现 ; expected。例如,有七八个 shBrushXxx.js 文件中必须压缩前手工加上一个分号,都是出现在像

SyntaxHighlighter.brushes.Scala.prototype = new SyntaxHighlighter.Highlighter();

之前的一个大括号后面要加上一个分号。

JS 的压缩工具很多,有很多在线的,我这里用的是 Jspacker 客户端 JS 压缩工具,可以选择多个文件压缩并合并到一个文件中,所有内容都放在一行里头了。可以直接下载我做好了的 shBrushes.js 文件,并放到 SyntaxHighlighter Evolved 的插件目录下 syntaxhighlighter/scripts 子目录中。

现在完成了第一步,以后只需加载一个被压缩的 shBrushes.js 即可,接下来得告诉插件怎么去只加载这个 js,而不加载别的。要修改插件文件了,该插件总共就只有一个 php 文件 syntaxhighlighter.php,不动它还能动谁啊。

可以在 wp-admin 中,用插件编辑器打开该文件,在第 47 行有:

wp_register_script( 'syntaxhighlighter-brush-as3',        plugins_url('syntaxh..................

看到这里正在注册所有的 Brush,我们制作好的 shBrushes.js 可在它前面注册,注意要写在:

wp_register_script( 'syntaxhighlighter-core',             plugins_url('syntaxhigh..................

加载核心 js 之后就行,加上一行:

wp_register_script( 'syntaxhighlighter-all-brushes', plugins_url('syntaxhighlighter/syntaxhighlighter/scripts/shBrushes.js'),  array('syntaxhighlighter-core'), $this->agshver );

注册完成,还需要处理真加载,即反应到 <script src="...shBrushes.js"></script> 上才行。还是在这个文件中,找到

function maybe_output_scripts()  函数定义,把如下代码

替换为:

也就是设置了 Load All Brushes 时,直接加载我们指定的 shBrushes.js 文件即可,不用去依据 Brush 名字依次加载别的 js. 而且这么做应该也不会影响到 [ code lang="js"]code here[/code] 对代码的语法加亮。

其实压缩在这里性能体现不是很明显,未压缩前 27 个 js 总体积是 85.4 K,压缩后的 shBrushes.js 大小为 37.3, 比例是有,但绝对量不大。主要还是由多个变为一个不仅页面简洁,而且可以节约不少连接的建立过程。


从 SyntaxHighlighter Evolved 3 的版本开同时支持 SyntaxHighlighter 2 和 3,我选择使用 Syntaxhighlighter 3,针对它来优化的步骤有一些不同。

1. 压缩 shCore.js 之外的 js 文件到 syntaxhighlighter/syntaxhilighter3/ 目录下

2. 在 syntaxhighlighter.php 文件中,找到下面代码行:

在它之后加上:

3. 找到函数 function maybe_output_scripts(), 里的:

把上行替换为:

即告完工。

这里附上一个针对 SyntaxHighlighter Evolved 3.0.83 已压缩合并好的 js 文件下载链接: shBrushAll.js

本文链接 https://yanbin.blog/optimize-syntaxhighlighter-evolved/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments