【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就是：由于浏览器会将<，>，&一些特殊字符解析，因此若源代码中出现他们的解析字符如：>，<，&则会失效，唯一的解决办法是将&替换成&后再进行着色。
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就是：由于浏览器会将<，>，&一些特殊字符解析，因此若源代码中出现他们的解析字符如：>，<，&则会失效，唯一的解决办法是将&替换成&后再进行着色。