JSSC ver2.0 正式版：挑战Google开源项目SyntaxHighlighter

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

评论

18 楼 congpeixue 2008-10-05  

好东西 不错

17 楼 fins 2008-09-09  

非常感谢 太好了!!!

====================
提个小建议

目前的jssc 对 富文本的复制 支持的不好.

选中代码 复制出来 再粘贴到文档里 并不能保持着色状态
(一些软件可以 如word  一些不可以 如foxmail )

建议完善一下这个功能 .
楼主可以参考一下我写的这个:
http://fins.iteye.com/blog/239642

我这个写的很烂 但是复制出来的着色代码 可以很好的显示在 word wps oe foxmail中

JSSC 在我这里有点问题 复制出来 粘贴到其他软件里 变成了普通文本.
希望JSSC能够加强这方面的功能 这样我就可以放心大胆的使用JSSC了

16 楼 archerzz 2008-09-08  

这个东西的性能如何？SyntaxHilighter的performance让人流泪……

15 楼 makefile 2008-07-23  

<p><img src='http://www.actiprosoftware.com/Products/DotNet/ASPNET/CodeHighlighter/Images/CHOutliningSmall.gif' height='353' alt='带收缩的高亮显示' width='400'/></p>
<p>看看带收缩的高亮显示，如果语法高亮能做到这样，那多好。</p>
<p>我比较奇怪的是，“我提议最好能做带收缩功能的语法高亮。”</p>
<p>我的提议那不好，也没个说法，直接做为差贴，这样的提议不对，还是语法收缩不知道啥意思？</p>
<p>我希望楼主能提高工具的功能，这么简单愿望不能跟贴。</p>

14 楼 makefile 2008-07-22  

要是带收缩的就更好了，看看csdn。

13 楼 zhu18 2008-05-08  

不错  喜欢

12 楼 ftmouse 2008-04-06  

做的很好。打算用到项目里面去

11 楼 apoclast 2008-03-23  

楼主的做的不错，我前不久也作过一个，可惜只做了C家族代码高亮

字符串的转义(\"不应该终结字符串)和预转义(比如\\"应该终结字符串)处理了1层

演示地址
http://www.apoclast.org/labs/2008_3/CodePanel/CodePanel.htm

10 楼 happycookie 2008-03-23  

我就看上javaeye中的这个功能了
还想问怎么实现呢,继续关注中^_^

9 楼 trydofor 2008-03-05  

Army 写道

各方面差不多完备了，如果没有人或者自己找不出bug来我想可以放出正式版了～

刚好我也做过这样的东西,你的着色器显然下了功夫,但不要去挑战别人,先挑挑自己.
你的着色器目前还不能解决一下问题2个基本问题:

1.转义:String = "Hello World!\"\\";
2.按需载入

8 楼 vision2000 2008-02-18  

不错，支持一下

7 楼 minimu 2008-02-03  

关注下，改天自己看看

6 楼 Army 2008-02-02  

各方面差不多完备了，如果没有人或者自己找不出bug来我想可以放出正式版了～

5 楼 Army 2008-01-25  

猫尾摆摆 写道

啊，非常不错，就是不知道有无关键词加粗的功能？？？？

只要在css里将关键字的样式定义为粗的就行了……

另外有人熟悉python的语法吗？主流语言应该就差这一个了……

又跳出来个别隐藏的细微错误……

加了激活行高亮显示。

ie、ff、opera应该都支持新的复制到剪贴板功能了～

4 楼 猫尾摆摆 2008-01-25  

我觉得这是一个很不错的语法着色工具啊，怎么没人关注？

3 楼 猫尾摆摆 2008-01-25  

啊，非常不错，就是不知道有无关键词加粗的功能？？？？

2 楼 Army 2008-01-23  

总体过程，红色框是下面的另一张图：
---




--------



细节部分：
---

1 楼 Army 2008-01-23  

源码的话直接看源文件就能下载……

javaeye用的应该就是原先的sh吧？我看好像似的……

我还是个学生，这个东西是个人兴趣弄出来的……

晚点时间补一张着色的流程图上来。