【JavascriptSyntaxColor ver 2.0】挑战Google开源项目SyntaxHighlighter

2008-01-21 14:26 | Army

JavaScriptSyntaxColor ver2.0

JS语法着色器第二版页面:http://army.512j.com/creations/code/jssc2/

---

Google开源项目(SyntaxHighlighter 1.51)主页:http://code.google.com/p/syntaxhighlighter/

JS语法着色器第一版(JavaScriptSyntaxColor ver 1.1)主页:http://army.512j.com/creations/code/highlight/

---

去年夏天时间左右因为上编译原理课程的缘故,我写了个js的语法着色器,主要是着色js和java,后来就成为了JSC1.0版,过后我又对它进行了细微的更新,并将最终版1.1版放在了我的个人主页上。经过一段时间后,特别是在我看了当年dp.SyntaxHighlighter的部分代码(dp.SyntaxHighlighter已经发布为Google下开源项目),而后又看了开源后的SyntaxHighlighter一些代码后决定重新发布新版本。

从元旦开始,我就进行整体构思了。因为学期末的原因时间较紧,一直拖到现在放假才开行进行。不过有了第一版的基础,第二版的开发会顺利不少,但也存在许多新的难题。我准备在第二版完成之后再考虑进行第三版的开发,到时将主要添加代码折叠功能。这段假期我当然是用来学习咯~

---

第一版与原先dp.SyntaxHighlighter相比存在的优缺点为:
1.优点
代码长度较短(240行对700多行)
着色效果更好(对字符串、数字的效果以及sh存在一个字符串bug)
在低版本浏览器上表现更好(我的IE6.0中若代码太长需要拖动SyntaxHighlighter会出现色块)
用esc进行压缩的比率更好(lv4压缩)
2.缺点
可扩展性差(每一种语言得全部重新编写)
支持种类少(仅js和javascript)
可读性差(没有进行重构)
支持的着色标签单一(只能textare)
功能方面不如
一些细节方面的缺陷


---

针对这些缺点我进行第二版的编写后,目前经测试版后发布beta供大家试用,请将出现的bug一一反馈给我,好进行分析修改。另外源码也是开放的,如果有好的意见和提议或是什么错误的地方也请说出来讨论。这篇文章现在发了3个论坛,就是为了集思广益。

---

第二版与目前SyntaxHighlighter相比的优缺点为:
1.优点
代码长度更短(233行对700多行)
着色效果更好(保留1.1版的优势并着重加强了数字润色,并可交叉着色)
在低版本浏览器上表现更好(同第一版)
压缩的比率更好(可以用jsa混淆变量压缩)
扩展性增强(应该不相上下)
可读性维护性增强(也应该不相上下,不过更短的代码阅读维护应该更方便些)
2.缺点
可能存在一些细节方面的缺陷


---

第二版的代码构思一部分源于1.1版,另一部分源于开源的SyntaxHighlighter,剩下的则是新思维创造。面对1.1版的缺陷,2.0版代码在阅读性、维护性、可扩展性、着色功能、代码长度方面都提升了不少,支持的种类也只需编写相应的语法关键词和正则库即可。

由于js运行的速度主要取决于网络下载的速度及下载量,因此在压缩率和长度均占优势的情况下jsc ver 2.0总体上还是不输给对手的。现在缺的就是继续对功能、细节以及多种语法的关键词和正则库进行编写。我会继续进行的。

---

使用说明:

和SyntaxHighlighter一样,在head区里或者body区里添加js文件链接core.js,然后再将相应的语法关键词和正则库文件加入:如javascript.js,表明页面中需要对一段js代码进行着色。记得core.js必须首先添加。

将要着色的代码放入<textarea>标签中,并设置此标签的class属性为代码名,如:<textarea class="javascript">,再将其命名为code,如:<textarea class="javascript" name="code">,将代码放入即可。

最后在body尾部加入:
<script type="text/javascript">
jsc.colorAll("code");
</script>
如此就可以了。如果命名code和你的页面有冲突,可以进行改名,并将改名之后的新名称替换body尾部中的"code"名字即可。

目前两种着色器都存在的bug就是:由于浏览器会将<,>,&一些特殊字符解析,因此若源代码中出现他们的解析字符如:&gt;,&lt;,&amp;则会失效,唯一的解决办法是将&替换成&amp;后再进行着色。