- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>SyntaxHighlighter Build Test Page</title>
- </head>
- <body>
- <h3>SyntaxHihglighter Test</h3>
- <pre id="showCode">
- var hi = "hi!";
- function test()
- {
- var a = 5;
- if(a<10)
- {
- return 10;
- }
- else
- {
- return avar b = a;
- }
- dvar b = a;
- }
- </pre>
- <script type="text/javascript">
- function hightLight(str)
- {
- var start_var = false;
- if(str.substring(0,3) == "var")
- {
- start_var = true;
- }
- var keywords_green = "= { }".split(" ");
- var keywords_blue = "function new return var typeof instanceof".split(" ");
- var keywords_red = "break case catch continue default delete else finally for if switch this throw try void while with ;".split(" ");
- //user lite keyword no hightLight with: do in
- strstr = str.replace(/};/g,"};\n");//对只有一行的压缩代码,每个方法换一行,方便查阅
- for(var i = 0; i < keywords_green.length; i++)
- {
- var oReg = new RegExp(keywords_green[i], "g");
- var rp = "<span style='color:green'>" + keywords_green[i] + "</span>";
- strstr = str.replace(oReg,rp);
- }
- //给异常的关键字var加上背景颜色,顺序不能变
- var rp3 = "<span style='background-color:yellow'>$1var</span>";
- strstr = str.replace(/([^;|{|\t| ])var/g,rp3);
- if(start_var)
- {
- alert(str);
- //去掉第一个以var开头的背景颜色
- strstr = str.replace(/<span style='background-color:yellow'>var<\/span>/,"var");
- }
- for(var i = 0; i < keywords_blue.length; i++)
- {
- var oReg = new RegExp(keywords_blue[i], "g");
- var rp = "<span style='color:blue'>" + keywords_blue[i] + "</span>";
- strstr = str.replace(oReg,rp);
- }
- for(var i = 0; i < keywords_red.length; i++)
- {
- var oReg = new RegExp(keywords_red[i], "g");
- var rp = "<span style='color:red'>" + keywords_red[i] + "</span>";
- var rp2 = "$1<span style='color:red'>" + keywords_red[i] + "</span>(";
- //if for are use more and other code not in keyword are use it
- if(keywords_red[i] == "if")
- {
- strstr = str.replace(/if(\s?)\(/g,rp2);
- }
- else if(keywords_red[i] == "for")
- {
- strstr = str.replace(/for(\s?)\(/g,rp2);
- }
- else
- {
- strstr = str.replace(oReg,rp);
- }
- }
- strstr = str.replace(/\n/g,"<br />");
- strstr = str.replace(/\t/g," ");//for ie can't with four space
- return str;
- }
- function init()
- {
- var obj = document.getElementById("showCode");
- var str = obj.innerText || obj.textContent;//innerHTML会吧<>转义成<>导致无法加亮分号
- obj.innerHTML = hightLight(str);
- }
- init();
- </script>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Build Test Page</title>
</head>
<body>
<h3>SyntaxHihglighter Test</h3>
<pre id="showCode">
var hi = "hi!";
function test()
{
var a = 5;
if(a<10)
{
return 10;
}
else
{
return avar b = a;
}
dvar b = a;
}
</pre>
<script type="text/javascript">
function hightLight(str)
{
var start_var = false;
if(str.substring(0,3) == "var")
{
start_var = true;
}
var keywords_green = "= { }".split(" ");
var keywords_blue = "function new return var typeof instanceof".split(" ");
var keywords_red = "break case catch continue default delete else finally for if switch this throw try void while with ;".split(" ");
//user lite keyword no hightLight with: do in
str = str.replace(/};/g,"};\n");//对只有一行的压缩代码,每个方法换一行,方便查阅
for(var i = 0; i < keywords_green.length; i++)
{
var oReg = new RegExp(keywords_green[i], "g");
var rp = "<span style='color:green'>" + keywords_green[i] + "</span>";
str = str.replace(oReg,rp);
}
//给异常的关键字var加上背景颜色,顺序不能变
var rp3 = "<span style='background-color:yellow'>$1var</span>";
str = str.replace(/([^;|{|\t| ])var/g,rp3);
if(start_var)
{
alert(str);
//去掉第一个以var开头的背景颜色
str = str.replace(/<span style='background-color:yellow'>var<\/span>/,"var");
}
for(var i = 0; i < keywords_blue.length; i++)
{
var oReg = new RegExp(keywords_blue[i], "g");
var rp = "<span style='color:blue'>" + keywords_blue[i] + "</span>";
str = str.replace(oReg,rp);
}
for(var i = 0; i < keywords_red.length; i++)
{
var oReg = new RegExp(keywords_red[i], "g");
var rp = "<span style='color:red'>" + keywords_red[i] + "</span>";
var rp2 = "$1<span style='color:red'>" + keywords_red[i] + "</span>(";
//if for are use more and other code not in keyword are use it
if(keywords_red[i] == "if")
{
str = str.replace(/if(\s?)\(/g,rp2);
}
else if(keywords_red[i] == "for")
{
str = str.replace(/for(\s?)\(/g,rp2);
}
else
{
str = str.replace(oReg,rp);
}
}
str = str.replace(/\n/g,"<br />");
str = str.replace(/\t/g," ");//for ie can't with four space
return str;
}
function init()
{
var obj = document.getElementById("showCode");
var str = obj.innerText || obj.textContent;//innerHTML会吧<>转义成<>导致无法加亮分号
obj.innerHTML = hightLight(str);
}
init();
</script>
</body>
</html>
运行结果:
SyntaxHihglighter Test
var hi = "hi!"; function test() { var a = 5; if(a<10) { return 10; } else { return avar b = a; } dvar b = a; }
发现javaEye的语法着色功能有bug,我原来的str = str.replace(/};/g,"};\n");变成strstr = str.replace(/};/g,"};\n"); 了!给多了个str,重新编辑html代码也给弄乱了,把源代码上传给大家了。
语法着色我自己测试过了,这个其实很简单,就是把关键字替换一下而已,那些关键字替换成什么颜色完全可以自定义,语法着色不是我的目的,我的目的是作为压缩脚本后的语法检查。
因为不规范的写法在脚本压缩成一行和去掉多余空格后经常会报错,例如赋值符后的变量没有以;号结束,else后面没有{}包含起来等,在压缩后的脚本通过语法着色可以比较容易知道在那个地方出错了。