用SyntaxHighlighter格式化代码

什么是SyntaxHighlighter

事实上在三天前我也不知道SyntaxHighlighter是什么东西，经过这两天的接触才发现这是个相当不错的基于JS的html页面代码高亮渲染工具（呃，姑且这么称呼吧）。为什么用代码高亮渲染工具？当我们有时候遇到技术问题求助无门的时候往往会想到上Google百度一下，看看网上有没有现成的代码供参考，于是搜索框关键字一打回车键一敲，刷地一下出现天文数字个搜索结果，这时候我们表示淡定，因为知道网上N多东西抄来抄去一大堆重复内容。然后按搜索排名挨个点击进去，却看到一个个网页上几百行乱糟糟的纯文本代码，过差的可读性抹煞了阅读的兴趣也降低了阅读的效率。这时候代码高亮工具就站出来了，誓为捍卫代码的整齐和美丽展开局域性保卫工作，于是我们可以发现一些靠谱的blog文往往会事先将里面的明文代码格式化好打扮得跟IDE里面一个样子供用户阅读，程序员表示这样很愉快。

本blog使用的版本

网上流传的代码高亮渲染工具有很多种，经过比较，最后敲定了用SyntaxHighlighter。搜索了一下发现SyntaxHighlighter 1.5版本目前是使用者较多的版本，于是小心翼翼地下载了文件包跟着教程配置了一下，效果不错，为了获得跟高级的特性访问了一下官网，发现3.083版本都已经出来了，就欢快地用了一下，发现配置比1.5稍简单，表现层和渲染层模块的拆分更加合理了。

如何安装

1.将文件压缩包拷贝下来，解压到本机或者你的站点，尽量保证存放的路径明确；
2.在你的页面中外链js文件shCore.js和shBrushJScript.js,以及相关css文件,也许你会发现style文件夹里包含了十几个css文件,不用紧张,随便挑选一个作为外链文件(至于为什么这样做,稍后会说明)；

1
2
3
4
5
6
7
8
<SCRIPT type=text/javascript src="/scripts/shCore.js"></SCRIPT>
<SCRIPT type=text/javascript src="/scripts/shBrushJScript.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="/STYLE/shCoreRDark.css">
 
<SCRIPT type=text/javascript>
   SyntaxHighlighter.all();
</SCRIPT>
3.根据你的需要加入代码区域，SyntaxHighlighter 现可以对23种编程语言的代码进行格式化，接下来我们以Javascript语言为例，为什么要选择js作为演示呢，因为步骤2中我们外链了shBrushJScript.js，它是一个专门为js代码做格式化的文件；
4.在<pre class=”brush:js;”></pre>或者<script type="syntaxhighlighter" class="brush: js"></script>（建议不要使用script标签，因为这样常用的标签很容易造成冲突）标签中创建代码；
1
2
3
4
5
<PRE class=brush:js;>function helloSyntaxHighlighter()
{
  return "SyntaxHighlighter 3.0.83 ";
}
</PRE>
注意：brush:js;表示这个代码区域内部是js代码，这是必须指明的，否则渲染器无法工作。
5.在页面加载完成时执行一句js代码SyntaxHighlighter.all()，大功告成，你将看到跟本文代码区域相似的效果。

 

安装的本质其实为页面增加了下面这几行代码(可以放在head内，但建议放在body的最后面减轻对页面加载造成的影响)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<SCRIPT type=text/javascript src="/scripts/shCore.js"></SCRIPT>
<SCRIPT type=text/javascript src="/scripts/shBrushJScript.js"></SCRIPT>
<SCRIPT type=text/javascript src="/scripts/shBrushXml.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="/STYLE/shCoreRDark.css">
 
<SCRIPT type=text/javascript>
    SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</SCRIPT>
<PRE class=brush:js;>function helloSyntaxHighlighter()
{
  return "SyntaxHighlighter 3.0.83 ";
}
</PRE>

若希望SyntaxHighlighter能正常工作，shCore.js是必须的；shCoreRDark.css是格式化主题，可以在style文件夹中选择你喜欢的一个主题文件并将它外链到页面上；shBrushJScript.js文件的作用是为了让渲染器能够对javascript代码进行格式化，shBrushXml.js的作用是为了让渲染器能够对XML代码进行格式化，刚才说过SyntaxHighlighter支持23种语言，如果你需要渲染器支持其他语言，就必须外链其他相应的文件，想了解各语言对应的文件请点击这里。
注意：确保外链路径正确，所有对SyntaxHighlighter的自定义配置都应写在SyntaxHighlighter.all();之前。

如何更改css主题

SyntaxHighlighter 3.0.83支持更换主题样式，方法很简单，直接更换内的链接文件路径就可以了：

1
<LINK rel=Stylesheet type=text/css href="PATH/Styles/FileName.css">
务必确保其中href指示的相对路径中CSS文件存在，查看更多主题点击这里

3.083版本的toolbar貌似被开发者弱化了，这里没有CopyToClip按钮，如果我们要复制一段代码，双击这块代码区域即可。至此，如果只是想图方便用一下SyntaxHighlighter让你的技术博文看起来更赏心悦目一些，对SyntaxHighlighter的功能特性和实现没有太大的兴趣，那么进行这里到这里就可以了，更多的分析和高级特性研究将会放到《SyntaxHighlighter的自定义配置》一文中。