在网页中语法高亮显示代码的例子

from:

http://phrogz.net/js/Classes/docs.css

http://phrogz.net/js/Classes/syntaxcolor.js

 

=============================  css  ==========================================

body	{ margin:0 }

h1,h2,h3,h4	{ font-family:Verdana,sans-serif; border-bottom:1px solid black; margin:0; margin-bottom:0.5em }



a:link,a:visited	{ background-color:#ff9; color:black }

a:visited	{ background-color:#ffd; color:#333 }

a:hover,a:active	{ background-color:#ff3 }

a[target=external]	{ border:1px dotted #cc3 }



p	{ margin-top:0; margin-bottom:1.2em }



h1	{ font-size:120%; padding:0.2em 0.5em; background-color:#666; color:#ccc }

h1 code	{ color:#ccc }



h2,h3,h4	{ font-size:110%; border-bottom-color:#999; margin-top:2em }

h3,h4	{ font-size:100%; color:#333 }



#pagecontent	{ margin:2em }



ul	{ margin-top:0 }

li	{ margin-bottom:0.6em }





p.overview	{ font-size:larger; font-style:italic }

.contentfollows	{ margin-bottom:0 }

.contentbefore	{ margin-top:0 }



code	{ font-size:100%; font-family:Courier,'Courier New',monospace; color:#060 }

h2 code	{ font-size:110% }





pre code	{ font-size:100% }

pre	{ margin:0 0 1em 2em }



code .keyword	{ color:#00c }

code .paren	{ color:#900; font-weight:bold }

code .number	{ color:black }



code .string,

code .string .keyword,

code .string .paren,

code .string .string,

code .string .number	{ color:#949; font-weight:normal }



code .comment,

code .comment .keyword,

code .comment .paren,

code .comment .string,

code .comment .number { color:#999; font-weight:normal }



code.block	{ display:block; white-space:pre; margin:1em }



p.byline	{ font-size:80%; padding:0.2em 0; margin:1em 2.4em; font-style:italic; border-top:1px solid #ccc; color:#666 }



.ancillary	{ color:#666; font-size:90%; font-style:italic }



button	{ display:inline }



#overview	{ font-style:italic }





//************************************* js ****************************************************

//*** This code is copyright 2003 by Gavin Kistner, !@phrogz.net

//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt

//*** Reuse or modification is free provided you abide by the terms of that license.

//*** (Including the first two lines above in your source code mostly satisfies the conditions.)



AttachEvent(window,'load',function(){

	var codes = document.getElementsByTagName('code');

	for (var i=0,len=codes.length;i<len;i++){

		var code = codes[i];

		if (code.className!='js' || !code.firstChild) continue;

		code.innerHTML=SyntaxColored(code.firstChild.data);

	}



	function SyntaxColored(js){

		if (!js || !js.replace) return "";

		js=js.replace(//r/g,'/n');

		js=js.replace(/</g,'&lt;').replace(/>/g,'&gt;');



		var parens = /([/]/[(){}]+)/g;

		var comments = /(.+|///*(.|/n)+?/*//)/g;		

		var keywords = //b(function|var|if|isNaN|return|if|else|for|while|new|continue|switch|case|true|false|prototype|constructor|caller|Number|Date|Object|String|Function|Array|RegExp|Boolean|Math)/b/g;

		var strings = /((["'])(?:.*?(?:[^//](?:)*|[^//]))?/2)/g;

		var numbers = //b(-?(?:/d+|/d*/./d+)/b)/g;



		js=js.replace(strings,'<span class="string">$1<//span>');

		js=js.replace(parens,'<span class="paren">$1<//span>');

		js=js.replace(numbers,'<span class="number">$1<//span>');

		js=js.replace(keywords,'<span class="keyword">$1<//span>');

		js=js.replace(comments,'<span class="comment">$1<//span>');

		if (document.all) js=js.replace(//n/g,"<br>").replace(/  /g," &nbsp;").replace(//t/g," &nbsp; &nbsp;"); //IE-specific hack

		js=js.replace(/<//span>/n/g,"<//span>&nbsp;/n");

		return js;

	}

},false);





function AttachEvent(obj,evt,fnc,useCapture){

	if (!useCapture) useCapture=false;

	if (obj.addEventListener){

		obj.addEventListener(evt,fnc,useCapture);

		return true;

	} else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);

	else{

		MyAttachEvent(obj,evt,fnc);

		obj['on'+evt]=function(){ MyFireEvent(obj,evt) };

	}

} 

function MyAttachEvent(obj,evt,fnc){

	if (!obj.myEvents) obj.myEvents={};

	if (!obj.myEvents[evt]) obj.myEvents[evt]=[];

	var evts = obj.myEvents[evt];

	evts[evts.length]=fnc;

}

function MyFireEvent(obj,evt){

	if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;

	var evts = obj.myEvents[evt];

	for (var i=0,len=evts.length;i<len;i++) evts[i]();

}