西红柿爱番茄

2010-5-21 Update:

修改了下高亮的颜色，同时增加了对DOM方法：getElementById、getElementsByTagName等等的高亮（只需简单的增加个正则和css的class类来定义颜色即可）。

2010-5-19 Update:

通过测试，当前的高亮代码脚本在高亮HTML标签的时候，会出现那些带有属性的标签无法高亮，所以修改了脚本的正则和实现细节，对这个特殊处理。示例代码：

[html]
<div id="div1">getStyle test.</div>
<div id="div2">getStyle test.</div>
<div id="div3">getStyle test.</div>
<input type="button" value="Get data" id="btn" />
[/html]

=========================================================================

之前在倒弄网站优化的时候（具体请看《优化试试玩》、《尝试Gzip压缩》），使用firebug查看了下syntaxhighlighter插件代码高亮下代码的DOM结构，还真他妈的复杂。就每一行代码都来一个div–table–tbody-tr-td-code标签嵌套，而且对于需要高亮的代码又添加了更多的DOM节点。可想而知，一段代码通过它所自动生成的DOM结构够不够复杂了。正因为如此，如果代码量多的话，在YSlow下的“Reduce the number of DOM elements”总是出现红色警号。没办法，只能放弃使用它了。

但是当前文章数目也不少了，难道要到后台管理页面一篇一篇文章来改么？这个不成，干脆就在后台syntaxhighlighter生成的原始代码的基础上，重新写一个代码高亮的脚本，实现快速的过度了。为此，花费了大半天的时间，写出了一个简单的高亮代码，而且整站页面也都用它了，《示例页面》。

这次的代码高亮，实现了按需添加标签span来实现高亮，在需要高亮的字符串里添加span，而不用整个代码段嵌套标签，而且给予了适当的缩进，并使得正则表达式可以高亮(正则高亮在某些情况下会失效，并造成混淆)(正则高亮比较复杂，就暂且取消了)。通过对《Javascript Show Room》这个页面的前后对比，使用syntaxhighlighter的时候在YSlow下测试有4500多个DOM节点，使用我写的代码高亮之后，只有1200多个DOM节点，优化了4倍左右，甚感欣慰。

[javascript]
if(flag){
var content="supersha";
return this.html("supersha").replace(/<[\/]?[^>]+>/gi,"");
}else{
alert("ss"):
}
[/javascript]

但是当前的代码高亮还存在诸多不足，第一、比如对后台的syntaxhighlighter生成的原始代码存在依赖；第二、在高亮的时候，字符串、关键字、comment等等之间存在嵌套高亮的问题(暂时通过css的覆盖来解决了)；第三、因为关键字中后面空格的存在与否问题，会导致无法高亮的情况。这些都有待进一步的完善。

还有一点值得欣慰的是，终于把syntaxhighlighter插件中的那庞大的js代码给干掉了，原来需要引入20多K的js代码，并且需要的css代码也不少，特别是那一连串的!important，更是可恶。现在只需要引入3K多的js代码，加一点css代码，搞定！