共享社区

首页 » 互联网资源共享社区 » 网页资料共享 » JSSC 3 beta2(js语法高亮器 ver3 beta2)
ajax - 2008-5-7 11:15:00
不到两个月的时间,jssc3的beta版再次与大家见面了。5.1这几天比较空也比较有条件,正好可以继续开发我的jssc。大概由于习惯吧,也是为了区分SyntaxHighlighter,偶一直都习惯叫它“着色”,而不是“高亮”。即使这种叫法不是很考证、很专业,但大家都明白就成了~
上次发布的jssc2获得了不少人的反馈,其中有的意见是十分有价值的,它也成为了我继续改进程序的参考。感谢所有人的关心和支持,没有你们的帮助,jssc是不可能那么顺利地发展下去的。
根据我收到的多方的信息来看,jssc3准备对以下几点进行改进:
1.string的跨行和结尾转义问题(感谢apoclast的建议):
string末尾的转义存在问题,其实在写之时我就知道有这么一个bug,只是当时想这种极端情况应该不会有人去写吧?事实也的确如此。不过这个bug不改我也一直觉得缺点什么,尤其被人提出之后。
过去也确实没有好的想法,如今我打算引入“着色模式”来进行语法分析着色:一种模式是“正则匹配”,另一种是“线性搜索”。不同的语法选择不同的模式进行解析,如此一来功能和速度都得以解决,bug也相应消除,相信它是一个很好的方案。
2.多行方式问题:
jssc3将继续沿用前两版的多行处理方式,这是自己发明的算法,和SyntaxHighlighter是不同的。由于跨行和转义的改进,多行也相应地进行了调整。实验证明它的速度在领先SyntaxHighlighter的前提下,又有了略微的提升。
3.自动装载:
有人抱怨jssc2提供的Individual(每种语言独立版本)和All-in-one(全部混在一起的版本)还是不够完善,应该有自动装载。于是,在jssc3中将使用延迟异步装载来解决这一问题,并提供一个新的版本:auto-load。
4.代码折叠(感谢jindw给与的方法提示):
如今的语法高亮器有代码折叠功能的我曾经见过,但不多(本来高亮器就不多了),应用的范围很小,功能等等都不足,我没详细研究过。SyntaxHighlighter里也没有,因此我决定尽量为每种语言加入折叠功能,它们大体上分为3种:c风格的花括号折叠、ruby风格的关键字折叠、python风格的缩进折叠。
这里面c风格的折叠功能提供的较早,而其它的语法我不太熟悉,希望他人能够多帮忙。
5.轻量级的语言解析正则的问题(感谢hax在博客中的分析):
perl风格的正则和除法在轻量级解析上不能十全十美,目前jssc的做法是尽可能地匹配一个正则表达式,并将它着色成默认颜色(即不着色),而除法的/符号也是不着色的,如此在表面上看来显示的还是正确的。因为js语法高亮的功能并不要求底层的代码解析也要完全正确,只需显示正常,因此这一点点瑕疵并不会产生影响。况且能写出极端复杂的正则的情况也是微乎其微的,可以采取一些折中。
6.html、css、xml的解析(感谢hax在博客中的分析):
jssc在解析这三种语言上还是弱项,它们本身就比较复杂,再加上有些场景会出现多种语言嵌套的问题(如html嵌套css和脚本,有的内嵌xml)等,这种情况非常复杂,轻量级的解析方法几乎无法应对。
7.别名和标题以及未知语言
新版将仿照sh的方式提供语法别名,标题也可以自定义。另外对于未知语言不报错,只是没有高亮显示,只能够最基础的分行显示。
8.其它
代码长度、复用、可维护性、结构、速度等等能改善的已经不多了,当然还会继续挖掘隐藏着的那一点点潜力。
---
以下将详细叙述主要改进的两点:“着色模式”和“折叠功能”。
1.“着色模式”
“着色模式”分“正则匹配”和“线性搜索”两种,它们分别适应不同的情况。
比如我要判断解析的代码片段是否为数字,就应该用/\d+/这样的正则来匹配,成功则相应地着色为数字。而若要解析的代码片段是个string,则无法写出完美的方案。
考虑如下一行代码:"string\"。很显然这个字符串没有闭合,当前的语境应该是:这行全为字符串,并以下面某行中第一个未被转义的"符号结束。要想改变这一情况,正则的写法必须要求"符号前不能有\转义符。
而如果出现这种情况:"string\\"。这个字符串的末尾有转义符,但转义符本身被前面的转义符给转义了,如此这个string是闭合的。而正则想要写出这种情况比较复杂。
如此递归下去:"string\\","string\\\","string\\\\"……虽然几乎没有人会写出这样的代码,但毕竟它是理论上可能的,正则在这种情况下就显得束手无策了。
为此,jssc3中采用的是jssc1里面最简单最直接也是最根本的方法:“线性搜索”。当语法分析遇到字符串开始的"符号后,将直接去查找后面的"符号,找到后统计它前面的转义字符数。如果是偶数说明没有被转移,这个string到此闭合;否则继续查找,本行内没有就继续查找后面的行,直到找到为止。
这也是设置多行方式的重要原因之一。
2.“折叠功能”
这是受jindw在它的jsi中应用相同功能的思维启发,采用深度计数器来实现。
以c系列风格语言为例:先设定aFoldList数组用以保存需要折叠的节点,aFoldDepth数组用以保存相应节点的深度。每解析一行代码时,如遇到{符号则iDepth++,并且本行节点入栈aFoldList,新的深度0入栈aFoldDepth;如遇到}符号则iDepth--,aFoldList出栈,aFoldDepth出栈。一行分析完成后aFoldDepth中所有的深度计数器自增。
在aFoldList出栈的时候,如果相应的aFoldDepth出栈的深度计数器>1,则说明aFoldList出栈的那个节点可以折叠,折叠的数目就是出栈的深度计数器-1。如此一来即使嵌套的{}折叠也得以解决。
---
自动装载的版本和普通的相差不大,只多了个通过xhr加载语法脚本的过程。你可以通过http://army.512j.com/creations/code/jssc3/autoload.html 查看这个版本,可以看出它在功能上是没有任何区别的。
另外,由于多了折叠过程,因此jssc3在代码量和性能上要比jssc2多耗一点。如果你觉得折叠没什么用处,而且还不稳定的话,可以选择继续使用jssc2。它的核心部分已经改进,和没有折叠的jssc3是完全一样的。
jssc2:http://army.512j.com/creations/code/jssc2/index.html
好了,就到这里了,相信jssc3的正式版本很快就能和大家见面了。最后还要感谢那些给我来信、回帖的人,你们的支持和意见是无比珍贵的,它是对jssc最大的帮助!
ajax - 2008-5-7 11:16:00
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就是:由于浏览器会将<,>,&一些特殊字符解析,因此若源代码中出现他们的解析字符如:>,<,&则会失效,唯一的解决办法是将&替换成&后再进行着色。
ajax - 2008-5-7 12:41:00
总体过程,红色框是下面的另一张图:
---




--------



细节部分:
---
webyou0 - 2008-12-12 23:38:00
代码着色插件
2008-12-11
整合整理:Arc
Mail
webyou0@126.com

代码来源:

1.
着色插件改造的 jssc3(语法高亮器v3)代码来源-- http://www.mikecat.net/ 

2.
被整合论坛Discuz!
6.0.0

(UTF-8)

论坛代码来源-- http://www.discuz.net
当然您有兴趣可以整合更高版本的,方法应该和这个差不多,不过要细心研究一下,呵呵!-:)




Jssc3支持的语言这里都可以正常着色哈哈,好像是废话!您有兴趣可以用最新的好像现在有 JSSC 3 beta2 您可以改造一下加以利用
注意:该插件目前 $() 好像和论坛的AJAX相冲突你可以改成别的名称再整合使用!

整合步骤:

1. plugins建立js目录,将插件jssc3拷贝这个位置(jssc3已经被改造过,不要使用原版,不然js部分会有点冲突)

2. include文件变动

2.1 找到discuzcode.func.php 文件

2.1.1 搜索
function codedisp($code)
函数将此函数替换为:

//---------------------------------------------------------
//-代码加亮 Arc Web Soft from archn.cn
function codedispToo($code,$codeclass) {
global $discuzcodes;
$discuzcodes['pcodecount']++;
$codeclass = $codeclass == 'csharp' ? 'c-sharp' : $codeclass;
$codename = $codeclass == 'code' ? '' : $codeclass;
$code = str_replace('\\"', '"', preg_replace("/^[\n\r]*(.+?)[\n\r]*$/is", "\\1", $code));
$discuzcodes['codehtml'][$discuzcodes['pcodecount']] =
tpl_codecsh($discuzcodes,$codeclass, $codename, $code);

$discuzcodes['codecount']++;
return "[\tDISCUZ_CODE_$discuzcodes[pcodecount]\t]";
}
//---------------------------------------------------------

2.1.2
搜索
if($parsetype != 1 && !$bbcodeoff && $allowbbcode)
将整条语句替换为:

//-----------------------------------------------------------------
//增加新的语言识别正则表达式,原表达式作废!Arc Web Soft from archn.cn
$codeYes=0;
if($parsetype != 1 && !$bbcodeoff && $allowbbcode) {
$message = preg_replace("/\s*\[code\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','未知')", $message);
$message = preg_replace("/\s*\[code\=xhtml\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','xhtml')", $message);
$message = preg_replace("/\s*\[code\=css\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','css')", $message);
$message = preg_replace("/\s*\[code\=xml\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','xml')", $message);
$message = preg_replace("/\s*\[code\=php\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','php')", $message);
$message = preg_replace("/\s*\[code\=java\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','java')", $message);
$message = preg_replace("/\s*\[code\=javascript\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','javascript')", $message);
$message = preg_replace("/\s*\[code\=actionscript\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','actionscript')", $message);
$message = preg_replace("/\s*\[code\=c\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','c')", $message);
$message = preg_replace("/\s*\[code\=csharp\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','csharp')", $message);
$message = preg_replace("/\s*\[code\=cpp\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','cpp')", $message);
$message = preg_replace("/\s*\[code\=vb\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','vb')", $message);
$message = preg_replace("/\s*\[code\=sql\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','sql')", $message);
$message = preg_replace("/\s*\[code\=ruby\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','ruby')", $message);
$message = preg_replace("/\s*\[code\=python\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','python')", $message);
$message = preg_replace("/\s*\[code\=delphi\](.+?)\[\/code\]\s*/ies", "codedispToo('\\1','delphi')", $message);
$codeYes=1;
}
//------------------------------------------------------------------

2.1.3
搜索 for($i = 0; $i <= $discuzcodes['pcodecount']; $i++) 将整条语句替换为:

//-----------------------------------------------------------------
//正常编译转换过的DISCUZ_CODE_$i
Arc Web Soft from archn.cn

if($codeYes) $message = $htmlon || $allowhtml ? $message : nl2br(str_replace(array("\t", '
', '
'), array('        ', '  ', '  '), $message));


for($i = 0; $i <= $discuzcodes['pcodecount']; $i++) {
if($codeYes)
$message = str_replace("[        DISCUZ_CODE_$i        ]", $discuzcodes['codehtml'][$i], $message);

else
$message = str_replace("[\tDISCUZ_CODE_$i\t]", $discuzcodes['codehtml'][$i], $message);

}
//------------------------------------------------------------------

2.1.4 隔过一条 if($highlight) 语句将 return $htmlon || $allowhtml ? $message : nl2br(str_r….. 语句替换为:

if(!$codeYes) $message = $htmlon || $allowhtml ? $message : nl2br(str_replace(array("\t", '
', '
'), array('        ', '  ', '  '), $message));


return $message;

2.2
javascript
文件夹下 editor.js

2.2.1
搜索discuzcode(cmd, arg) 函数 找到 var ctrlid = editorid + '_cmd_' + cmd;把下面的var str = '';替换为:

//-------------------------------------------------------------------------------
//位置或默认语言为default
Arc Web Soft from archn.cn

var str =(cmd=='code')?'请选择要加亮的语言:'+
'<select name="languages_'+ ctrlid +'" id="languages_'+ ctrlid +'">'+
'<option value="default">默认(Text</option>'+
'<option value="xhtml">HTML</option>'+
'<option value="css">CSS</option>'+
'<option value="xml">XML</option>'+
'<option value="php">PHP</option>'+
'<option value="java">Java</option>'+
'<option value="javascript">Javascript</option>'+
'<option value="actionscript">ActionScript</option>'+
'<option value="c">C</option>'+
'<option value="csharp">C#</option>'+
'<option value="cpp">C++</option>'+
'<option value="vb">VB</option>'+
'<option value="sql">SQL</option>'+
'<option value="ruby">RUBY</option>'+
'<option value="python">PYTHON</option>'+
'<option value="delphi">DELPHI</option>'+
'</select><br />' : '';
//--------------------------------------------------------------------------

2.2.2
搜索
if(cmd == 'hide' && $(ctrlid + '_radio_2').checked)
在整条语句下面加入:

//---------------------------------------------------------
//获取语言种类
Arc Web Soft from archn.cn

opentag = ((cmd=='code')) ? ($('languages_'+ ctrlid).value!='default')?'[' + cmd + '='+$('languages_'+ ctrlid).value+']':opentag:opentag;
//---------------------------------------------------------

3.
templates/
目录下的变动 (这里我们用的是默认模板)

3.1
在目录templates\default\ 找到 discuzcode.htm 文件


3.1.1
搜索 function tpl_codedisp($discuzcodes, $code) 将整条函数替换为:

function tpl_codecsh($discuzcodes, $codeclass, $codename, $code) {
}-->
<!--{block return}--><br><div class="dp-msgborder" id="code$discuzcodes[codecount]"><textarea name="code" class="$codeclass">$code</textarea></div><br><!--{/block}-->
<!--{eval return $return;}-->
<!--{eval
}

3.2
找到文件header.htm

<script type="text/javascript" src="plugins/js/jssc3/jssc3.js"></script>
加入<head>区域

3.3
找到文件footer.htm

<script type="text/javascript">
jssc.colorAll("code");
</script>
加入</body>前面


3.4
接下来应该是样式表了 找到css.htm文件将下列样式加入最后一行:

/*========CODE着色样式 from bbs.archn.cn===================start======*/
.dp-msgborder{border:1px orange dashed;background-color: #FDFDFD;}
.dp-msgborder .textarea {width: 98%;height: 300px;border: 0px;background: #fff;overflow: hidden;font: 10pt "Courier New",Courier,"宋体";background: #fcfcfc;}
.dp-msgborder .jssc {font: 10pt "Courier New","宋体";border: 1px solid #ccc;background-color: #f3f3f3;padding-top: 1px;padding-right: 2px;padding-bottom: 1px;padding-left: 5px;margin: 5px 2px 10px 2px;overflow: auto;}
.dp-msgborder .jssccodetitle {font: 9pt Verdana,"宋体";margin: 20px 0px 5px 40px;font-weight: bold;color: #79a;}
.dp-msgborder .jssccodetitle span{margin-Left: 30px;font-weight: normal;text-decoration: underline;cursor: pointer;}
.dp-msgborder .jssc ul {margin: 0px;padding: 0px;list-style: decimal outside;background-color: #fff;border-left: 1px solid #abc;color: #999;}
.dp-msgborder .jssc ul li{margin: 0px;}
.dp-msgborder .jssc ul li div {color: #333;padding-left: 6px;}
.dp-msgborder .jssc img {vertical-align: top;margin-right: 5px;width: 11px;height: 16px;}
.dp-msgborder .jssc .alt {background-color: #fafafa;}
.dp-msgborder .jssc .javascriptcomment,.dp-msgborder .jssc .javacomment,.dp-msgborder .jssc .ccomment,.dp-msgborder .jssc .cppcomment,.dp-msgborder .jssc .phpcomment,.dp-msgborder .jssc .csharpcomment,.dp-msgborder .jssc .vbcomment,.dp-msgborder .jssc .rubycomment,.dp-msgborder .jssc .delphicomment,.dp-msgborder .jssc .sqlcomment,.dp-msgborder .jssc .actionscriptstring,.dp-msgborder .jssc .htmlcomment,.dp-msgborder .jssc .xmlcomment,.dp-msgborder .jssc .pythoncomment {color: #090;}
.dp-msgborder .jssc .javascriptstring,.dp-msgborder .jssc .javastring,.dp-msgborder .jssc .ckeywords,.dp-msgborder .jssc .cppkeywords,.dp-msgborder .jssc .phpkeywords,.dp-msgborder .jssc .csharpkeywords,.dp-msgborder .jssc .vbkeywords,.dp-msgborder .jssc .rubykeywords,.dp-msgborder .jssc .delphikeywords,.dp-msgborder .jssc .sqlkeywords,.dp-msgborder .jssc .actionscriptkeywords,.dp-msgborder .jssc .pythonkeywords,.dp-msgborder .jssc .csskeywords,.dp-msgborder .jssc .xmlvariables,.dp-msgborder .jssc .htmlnum,.dp-msgborder .jssc .xmlsign,.dp-msgborder .jssc .htmlsign {color: #33f;}
.dp-msgborder .jssc .javascriptchar,.dp-msgborder .jssc .javachar,.dp-msgborder .jssc .cchar,.dp-msgborder .jssc .cppchar,.dp-msgborder .jssc .phpchar,.dp-msgborder .jssc .rubychar,.dp-msgborder .jssc .actionscriptchar {color: #e9a;}
.dp-msgborder .jssc .javascriptnum,.dp-msgborder .jssc .javanum,.dp-msgborder .jssc .cstring,.dp-msgborder .jssc .cppstring,.dp-msgborder .jssc .phpstring,.dp-msgborder .jssc .rubystring,.dp-msgborder .jssc .delphistring,.dp-msgborder .jssc .sqlstring,.dp-msgborder .jssc .actionscriptnum,.dp-msgborder .jssc .pythonstring,.dp-msgborder .jssc .pythonchar,.dp-msgborder .jssc .htmlvariables,.dp-msgborder .jssc .cssnum {color: #f33;}
.dp-msgborder .jssc .javakeywords {color: #905;font-weight: bold;}
.dp-msgborder .jssc .cnum,.dp-msgborder .jssc .cppnum,.dp-msgborder .jssc .phpnum,.dp-msgborder .jssc .csharpnum,.dp-msgborder .jssc .vbnum,.dp-msgborder .jssc .delphinum,.dp-msgborder .jssc .sqlnum,.dp-msgborder .jssc .rubynum,.dp-msgborder .jssc .pythonnum,.dp-msgborder .jssc .htmlkeywords,.dp-msgborder .jssc .xmlkeywords {color: #a36;}
.dp-msgborder .jssc .javascriptkeywords,.dp-msgborder .jssc .phpvariables,.dp-msgborder .jssc .rubyvariables,.dp-msgborder .jssc .cssstring,.dp-msgborder .jssc .htmlchar,.dp-msgborder .jssc .xmlchar,.dp-msgborder .jssc .htmlstring,.dp-msgborder .jssc .xmlstring {color: #a00;}
.dp-msgborder .jssc .csharpstring,.dp-msgborder .jssc .vbstring,.dp-msgborder .jssc .rubysymbol {color: #900;}
.dp-msgborder .jssc .csharpregion,.dp-msgborder .jssc .vbregion,.dp-msgborder .jssc .actionscriptcomment,.dp-msgborder .jssc .csscomment {color: #ccc;}
/*======================================================end======*/

4. 最后一步
以上基本任务已经完成,但还有一个重要的任务就是清空缓存啦!路径forumdata\cache\将里面的除index.htm的文件清除刷新两次页面就可以使用本插件了!


当然,你如果不想这么麻烦可以直接用我给你的编辑好的文件直接替换对应的就行了。不过前提是您不需使用默认模板,不然的话要自己去摸索一下了,有问题的话发邮件给我 Q我,我很希望能帮助大伙不断提高!
QQ
21269932
: )



打包的大家可以下载玩玩!
 附件: 您所在的用户组无法下载或查看附件
webyou0 - 2008-12-12 23:42:00
加油努力,我看楼主用的是512j空间,楼主要空间的话我的可以让你用!支持你!:+
1
查看完整版本: JSSC 3 beta2(js语法高亮器 ver3 beta2)