代码着色工具：ColorCode

老庄走狗 2006-07-06

展开全文

在编写 ColorCode 之前，我试用过几个代码着色工具，但总不能让我满意，主要存在以下几个缺点：

使用不方便：理想的状态应该是，只要我把代码贴上去，指定一些参数，它就可以帮我着色。但有些工具却要我先把某些特殊字符转换成 html 代码（例如尖括号），这样着色后的代码才能正确显示。
可读性差：这里的读者是指搜索引擎。着色后，真正代码淹没在密密麻麻的 html 标签中。理想的情况应该是，搜索引擎看到的代码和我们在页面上看到的代码是相同的。
可移植性差：我使用的 blog 工具是 Textpattern，可供使用的代码着色工具少的可怜。如果我只是想写一个简单的网页，而且我想让页面上包含的代码好看一点，就不得不使用一套包含代码着色插件的工具。理想的情况应该是，只要是 html 网页，就可以使用。这方面 dp.SyntaxHighlighter 做得最好，完全使用 JavaScript 来对代码着色。

特点

针对以上缺点，我编写了 ColorCode。ColorCode 借用了 dp.SyntaxHighlighter 很多观点，例如使用 textarea 标签作为代码载体、使用 JavaScript 参与着色过程等。但除了一点，ColorCode 把最终着色工作放在后台。ColorCode 有如下特点：

使用简单：只要在页面中包含所需的脚本文件和 CSS 文件，然后使用 textarea 标签将代码包含起来即可。
容易扩展：可以通过更改 CSS 文件来改变着色方案，可以通过增加语法定义文件来扩展 ColorCode 的语言支持，还可以通过扩展后台渲染引擎来美化代码。

用法

下面通过例子来说明使用方法：

<!-- 包含所需的 CSS 文件和脚本文件 -->
<link rel="stylesheet" href="/colorcode/colorcode.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/modello.js"></script>
<script type="text/javascript" src="/js/modello.ajax.js"></script>
<script type="text/javascript" src="/colorcode/colorcode.js"></script>

<!-- 指定着色引擎的位置 -->
<script language="javascript"><!--
Define(‘COLORCODE_BACK_END‘, ‘/colorcode/colorcode.php‘);
// 如果前台辅助脚本和后台着色引擎分别放在不同的地方，
// 还要指定中转 proxy 的位置。例如：
// Define(‘COLORCODE_BACK_END‘, ‘http://any./colorcode/colorcode.php‘);
// Define(‘URLGET_PROXY‘, ‘/colorcode/jsproxy.php‘);
-->
</script>

<!-- 使用 textarea 标签包含需要着色的代码 -->
<textarea class="colorcode language_javascript numbers_li tabsize_4">
var str = "Hello World";
alert(str);
</textarea>

参数有分两种：开关参数和赋值参数。开关参数只有其名字，给出这个参数名字则表示打开这个开关，反之不给出就表示关闭这个开关。赋值参数既有参数名字也有参数值，两者通过下划线分隔。多个参数通过空格来分隔。下面来解释各个参数的用法：

colorcode: 只有包含这个属性的 textarea 标签才会被处理
language: 使用哪种语法对代码进行着色。目前 ColorCode 支持14中语言的语法，它们分别是：c++, css, diff, dtd, html, java, javascript, mysql, perl, php, python, ruby, sql, xml
numbers: 使用那种方法对代码加上行号。有两种方法：li 和 table。li 方法比较简单，table 方法则可以通过修改 CSS 设计复杂的代码显示框。
tabsize: 设置 TAB 字符所占的空格数