使用SyntaxHighlighter实现代码高亮显示

SyntaxHighlighter官网https://github.com/syntaxhighlighter/syntaxhighlighter；

本文使用了3.0.83版本；引入css文件和两个js文件；

shCoreDefault.css文件：https://files.cnblogs.com/files/stono/shCoreDefault.css

shCore.js文件：https://files.cnblogs.com/files/stono/shCore.js

shBrushAll.js文件：https://files.cnblogs.com/files/stono/shBrushAll.js

增加一个encodeHTML方法：

var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
function encodeHtml(s){
      return (typeof s != "string") ? s :
          s.replace(REGX_HTML_ENCODE,
                    function($0){
                        var c = $0.charCodeAt(0), r = ["&#"];
                        c = (c == 0x20) ? 0xA0 : c;
                        r.push(c); r.push(";");
                        return r.join("");
                    });
}

 

在需要渲染的地方调用如下功能代码：

$("#result_div").empty();
$("#result_div").prepend("<pre>"+encodeHtml(code)+"</pre>");
var class_v="brush : java;"; 
$("#result_div pre").addClass(class_v);
SyntaxHighlighter.highlight();

其中的code就是源代码；

class_v表示需要渲染的语言，可以是java/js等，在shBrushAll.js中有记录；

如果需要使用可以编辑的应用场景，可以使用ace组件，https://github.com/ajaxorg/ace   https://ace.c9.io/