Syntax Highlighter 代码研究

      始终对代码恢复后的样式不是很满意于是对纯js实现的Syntax Highlighter作了一番研究，并根据自己的喜好改写和增加了一些功能
      突然又发现这里评论中的代码高亮样式我比较喜欢，于是看了下发现都定义好了的。。。我的努力白费了。。不过还是很有收获的...

1，首先看下该写后的效果，也可参照这里
js代码：
<script language="JavaScript"> <!-- /*正则表达式 多行模式 要制定多行模式，只要在正则表达式想要匹配的行末的一个单词 */ var data = " First second\n thind fourth\n fifth sixth"; var reCat = /(\w+)$/g; var arrdata = data.match(reCat); for (var i = 0; i < arrdata.length; i++) { alert(arrdata[i]); } /* 上面只返回一个单词 sixth，因为换行符阻挡了匹配，只能匹配行末的一个单词， 当然也可以使用 split() 方法将字符串分割成数组，但就得对每一行进行单独匹配。 以前不好好看书经常半吊子，看一半就仍了，导致用了好多 split， 其实很简单如下面 例子 只需要 m 参数进行多行匹配。 */ var data = " First second\n thind fourth\n fifth sixth"; var reCat = /(\w+)$/gm; var arrdata = data.match(reCat); for (var i = 0; i < arrdata.length; i++) { alert(arrdata[i]); } //--> </script>
c#代码：
/// <summary> /// Check the asset whether exists /// </summary> /// <temp_param name="runSpace" ></temp_param><param name="runSpace" ></param> /// <returns>Ture:Exists False:Not exists</returns> public bool CheckAssetExist(Runspace runSpace) { try { //The command of get assets Command cmd = new Command("Get-Asset"); //Prepare the parameters if (!ReadParameter(ref cmd, xPathGetAsset)) { return false; } //Execute command and get the return value Collection<PSObject> psObjectList = new Collection<PSObject>(); //Execute command if (!ExecuteCommand(ref runSpace, cmd, ref psObjectList)) { return false; } //Get the asset name to check XmlNode xmlNode = xmlDoc.SelectSingleNode(xPathAssetName); if (psObjectList.Any(n => n.Members["Name"].Value.ToString().ToUpper().Equals(xmlNode.InnerText.ToUpper()))) { return true; } return false; } catch (Exception e) { //Log Utility.PrepareErrMsg(ref errorMessage, e); Log.WriteLine(Log.LogType.Error, errorMessage); return false; } } #endregion
2，关于改写的Syntax Highlighter
调用就这2句：

    <script type="text/javascript">
        codeHighLight.ClipboardSwf = 'Scripts/clipboard.swf';
        codeHighLight.HighlighterAll('code', true, true, true, false);
    </script>

看字面意思就知道HighlightAll在给所有需要高亮的代码高亮显示，这里我去掉了一个显示列数的参数
一下是其代码：

codeHighLight.HighlighterAll = function(tagName, _60, _61, _62, _64) {
function FindValue() {
...
}
function IsOptionSet(_67, _68) {
...
}
function GetOptionValue(_6a, _6b, _6c) {
...
}
function FindTagsByName(_70, _71, _72) {
...
}
var _75 = []; //tag list (need to high light)
var _76 = null; //codeHighLight.Brushes
var _77 = {}; //aliases
FindTagsByName(_75, tagName, "pre");
FindTagsByName(_75, tagName, "textarea");
if (_75.length == 0) {
return;
}
for (var _79 in codeHighLight.Brushes) {
var _7a = codeHighLight.Brushes[_79].Aliases;
if (_7a == null) {
continue;
}
for (var i = 0; i < _7a.length; i++) {
_77[_7a[i]] = _79;
}
}
for (var i = 0; i < _75.length; i++) {
var _7d = _75[i];
var _7e = FindValue(_7d.attributes["class"], _7d.className, _7d.attributes["language"], _7d.language);
var _7f = "";
if (_7e == null) {
continue;
}
_7e = _7e.split(":");
_7f = _7e[0].toLowerCase();
if (_77[_7f] == null) {
continue;
}
_76 = new codeHighLight.Brushes[_77[_7f]]();
_7d.style.display = "none";
//check function arguments and set the currect settings
_76.noGutter = (_60 == null) ? IsOptionSet("nogutter", _7e) : !_60;
_76.addControls = (_61 == null) ? !IsOptionSet("nocontrols", _7e) : _61;
_76.collapse = (_62 == null) ? IsOptionSet("collapse", _7e) : _62;
_76.showColumns = (_64 == null) ? IsOptionSet("showcolumns", _7e) : _64;
if (_76.Style) {
document.write("");
}
//_76.firstLine = (_63 == null) ? parseInt(GetOptionValue("firstline", _7e, 1)) : _63;
_76.Highlight(_7d["innerHTML"]); //高亮这个new codeHighLight.Brushes[_77[_7f]]();
_76.source = _7d;
_7d.parentNode.insertBefore(_76.div, _7d);
}
};

然后是Highlight，这个方法比较繁琐

codeHighLight.Highlighter.prototype.Highlight = function(_4c) {
function Trim(str) {
return str.replace(/^\s*(.*?)[\s\n]*$/g, "$1");
}
function Chop(str) {
return str.replace(/\n*$/, "").replace(/^\n*/, "");
}
function Unindent(str) {
...
}
var _55 = _52.exec(_50[i]);
if (_55 != null && _55.length > 0) {
min = Math.min(_55[0].length, min);
}
}
if (min > 0) {
for (var i = 0; i < _50.length; i++) {
_50[i] = _50[i].substr(min);
}
}
return _50.join("\n");
}
function Copy(_57, _58, _59) {
return _57.substr(_58, _59 - _58);
}
var pos = 0;
if (_4c == null) {
_4c = "";
}
this.originalCode = _4c;
this.code = Chop(Unindent(_4c));
this.div = this.CreateElement("DIV");
this.bar = this.CreateElement("DIV");
this.ol = this.CreateElement("OL");
this.matches = new Array();
this.div.className = "dp-highlighter";
this.div.highlighter = this;
this.bar.className = "bar";
this.ol.start = this.firstLine;
if (this.CssClass != null) {
this.ol.className = this.CssClass;
}
if (this.collapse) {
this.div.className += " collapsed";
}
if (this.noGutter) {
this.div.className += " nogutter";
}
if (this.tabsToSpaces == true) {
this.code = this.ProcessSmartTabs(this.code);
}
this.ProcessRegexList();
if (this.matches.length == 0) {
this.AddBit(this.code, null);
this.SwitchToList(this.isJavaScript);
this.div.appendChild(this.ol);
return;
}
this.matches = this.matches.sort(codeHighLight.Highlighter.SortCallback);
for (var i = 0; i < this.matches.length; i++) {
if (this.IsInside(this.matches[i])) {
this.matches[i] = null;
}
}
for (var i = 0; i < this.matches.length; i++) {
var _5d = this.matches[i];
if (_5d == null || _5d.length == 0) {
continue;
}
this.AddBit(Copy(this.code, pos, _5d.index), null);
this.AddBit(_5d.value, _5d.css);
pos = _5d.index + _5d.length;
}
this.AddBit(this.code.substr(pos), null);
this.SwitchToList(this.isJavaScript);
this.div.appendChild(this.bar);
this.div.appendChild(this.ol);
};

其中创建第一行的div时的tools工具条是在上面的SwitchToList中完成，我加了一个参数_isJavaScript，目的是如果代码是js的话在tools栏上增加一个run code的button SwitchToList内有codeHighLight.Toolbar.Create的调用创建，一下是修改后的方法

codeHighLight.Toolbar.Create = function(_8, _isJavaScript) {
var div = document.createElement("div");
div.classname = "tools";
for (var i in codeHighLight.Toolbar.Commands) {
var cmd = codeHighLight.Toolbar.Commands[i];
if (cmd.check != null && !cmd.check(_8)) {
continue;
}
if (cmd.label == "RunCode " && !_isJavaScript) {
continue;
}
div.innerHTML += "" + cmd.label + "";
}
return div;
}

同时当然需要在codeHighLight.Toolbar.Commands中添加runCode的实现代码部分

var newWin1 = window;
var newWin = newWin1.open('', "_blank", '');
newWin.document.open('text/html', 'replace');
newWin.opener = null

var testCode = _runCode.originalCode.replace(/</g, "<");
var testCode = testCode.replace(/>/g, ">");
newWin.document.write(testCode);
newWin.document.close();