吴迪寒舍

Syntax Highlighter代码高亮工具安装使用教程

SyntaxHighlighter （原名：dp.SyntaxHighlighter）是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库。格式化效果如下所示：

// SyntaxHighlighter
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}

安装使用：

1、下载SyntaxHighlighter的JavaScript 库，官方网站：

http://alexgorbatchev.com/SyntaxHighlighter/download/

2、解压得到如下目录结构(不同版本大同小异)：

3、在需要高亮代码的页面引入：scripts/shCore.js  ,  styles/shCore.css , shThemeDefault.css(这个默认着色风格，其他风格在styles目录内直接引用即可切换风格) 文件。

4、根据不同语言引用不同着色JavaScript库，例如：要着色 PHP代码，继续添加引用php着色库:  scripts/shBrushPhp.js

5、页面初始化SyntaxHighlighter，使用代码如下：

<script type="text/javascript">
SyntaxHighlighter.all()
</script>

6、把需要着色的代码段包含在  <pre class=”brush: php”>[需要着色的代码]</pre> 内。即可正常高亮显示。

下面给出一个完整实例：

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="css/shBrushJScript.js"></script>
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
SyntaxHighlighter.all()
</script>

//开始着色：
<pre class="brush: php">
<?php
echo "这是要着色的PHP代码";
?>
</pre>

提高：

也许你已经感觉到了，这么麻烦~这么多JS css会严重拖慢网页加载速度，能不能只引用一个JS 一个CSS文件即可搞定？

答案是肯定的。

下面是官方给出的自动加载解决方案：

<script src="shCore.js" type="text/javascript"></script>
<script src="shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
SyntaxHighlighter.autoloader(
  'js jscript javascript  /js/shBrushJScript.js',
  'applescript            /js/shBrushAppleScript.js'
);

SyntaxHighlighter.all();
</script>

不过，反正我是不喜欢这种方案，很累赘，很牵强的感觉~~~不如一个来的实在。

单一文件引入例如本博代码如下：

<link href='/styles/shCoreDefault.css' rel='stylesheet' type='text/css' />
<script src="/scripts/brush.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

是不是很简单~~，其实我也就是把 公用 JS文件 shCore.js 和部分编程语言(shBrushJScript.js , shBrushJava.js , shBrushPhp.js 等)着色文件进行合并 ，因为其他的语言我不需要，也不能行写关于例如Delphi的代码，所以没必要。

CSS方面我使用的Syntax Highlighter默认风格 直接单引入shCoreDefault.css 当让我也比较喜欢 shCoreEmacs.css 这款风格~~

如果你喜欢 点击爽一下吧  ：JS文件  CSS文件

我的JS文件包含语言着色：bash, shell,css,js, jscript, javascript,java,php,py, python,rails, ror, ruby,sql,xml, xhtml, xslt, html, xhtml

对了，别忘记初始化噢~~