在html页面中实现java,javascript,xml文件的语法高亮显示

今天，偶然看到许多网站的页面中可以对java代码语法高亮显示。
看起来又方便又清爽，心里羡慕的很。
就很想搞清楚是怎么整出来，联系以前给Editplus加语法文件的经验。
想这个应该可以用js来过滤实现，总体思路确定后，就google了一些文章。
不敢专美，贴出来与众君分享！

highlight.js
------------------------------------------------------------------
  function   doHighlight(domNode,   syntax)   { 
  var   htmltxt   =   ""; 
  if   (syntax.toLowerCase()   ==   "java"   ||   syntax.toLowerCase()   ==   "javascript")   { 
  htmltxt   =   new   JavaHighLighter(domNode).highlight(); 
  }   else   if   (syntax.toLowerCase()   ==   "xml"   ){ 
  htmltxt   =   new   XMLHighLighter(domNode).highlight(); 
  }   else   { 
  alert("Not   supportted   syntax:   "   +   syntax); 
  return; 
  }   
  var   newNode   =   document.createElement("SPAN"); 
  newNode.innerHTML   =   htmltxt; 
  var   pNode   =   domNode.parentNode.replaceChild(newNode,domNode); 
  } 
  
  function   JavaHighLighter(domNode)   { 
  if   (domNode   ==   null)   { 
  alert("domNode   is   null!");   return; 
  } 
  this._domNode   =   domNode; 
  this._codetxt   =   this._domNode.innerHTML; 
  this._keywords="public,protected,private,static,void,final,class,extends,implements,super,this,boolean,while,if,return,new,true,false,try,catch,throws,throw,null,package,import,else,int,long,do"; 
  this._commonObjects   =   "String,Integer,Long,Boolean,List"; 
  this._wordDelimiters="   ,.?!;:/<>(){}[]/"'/n/t=+*%"; 
  
  this.highlight   =   function()   { 
  var   codeArr   =   new   Array(); 
  var   word_index   =   0; 
  var   htmlTxt   =   ""; 
  
  for   (var   i   =   0;   i   <   this._codetxt.length;   i++)   { 
  if   (this._wordDelimiters.indexOf(this._codetxt.charAt(i))   ==   -1)   {   //找不到 
  if   (codeArr[word_index]   ==   null   ||   typeof(codeArr[word_index])   ==   'undefined')   { 
  codeArr[word_index]   =   ""; 
  }   
  
  codeArr[word_index]   +=   this._codetxt.charAt(i); 
  }   else   { 
  if   (typeof(codeArr[word_index])   !=   'undefined'   &&   codeArr[word_index].length   >   0) 
  word_index++; 
  codeArr[word_index++]   =   this._codetxt.charAt(i); 
  }   
  
  } 
  
  
  var   quote_opened   =   false; 
  var   slash_star_comment_opened   =   false; 
  var   slash_slash_comment_opened   =   false; 
  var   line_num=1; 
  
  htmlTxt   +=   ("<div   class='code'>"); 
  for   (var   i=0;   i   <   word_index;   i++)   { 
  if   (codeArr[i]   ==   "   ")   { 
  htmlTxt   +=   ("&nbsp;"); 
  }   else   if   (!slash_star_comment_opened   &&   !quote_opened   &&   this.isKeyword(codeArr[i]))   {   //keyword 
  htmlTxt   +=   ("<span   class='keyword'>"   +   codeArr[i]   +   "</span>"); 
  }   else   if   (!slash_star_comment_opened   &&   !quote_opened   &&   this.isCommonObject(codeArr[i]))   {   //keyword 
  htmlTxt   +=   ("<span   class='commonobject'>"   +   codeArr[i]   +   "</span>"); 
  }   else   if   (codeArr[i]   ==   "/n")   { 
  if   (slash_slash_comment_opened)   { 
  htmlTxt   +=   ("</span>"); 
  slash_slash_comment_opened   =   false; 
  } 
  htmlTxt   +=   ("<br/>"); 
  line_num++; 
  
  }   else   if   (codeArr[i]   ==   "/""   &&   codeArr[i-1]   !="//")   { 
  if   (slash_star_comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   continue; 
  } 
  if   (quote_opened){ 
  htmlTxt   +=   (codeArr[i]+"</span>"); 
  quote_opened   =   false; 
  } 
  else   { 
  htmlTxt   +=     ("<span   class='string'>"+codeArr[i]); 
  quote_opened   =   true; 
  } 
  }   else   if   (codeArr[i]   ==   "/")   { 
  if   (codeArr[i+1]   ==   "*")   { 
  if   (slash_slash_comment_opened   ||   slash_star_comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   continue; 
  } 
  slash_star_comment_opened   =   true; 
  htmlTxt   +=     ("<span   class='comment'>"   +   codeArr[i]   +   codeArr[i+1]); 
  i++; 
  }   else   if   (codeArr[i+1]   ==   "/"){ 
  if   (slash_star_comment_opened   ||   slash_slash_comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   continue; 
  } 
  slash_slash_comment_opened   =   true; 
  htmlTxt   +=     ("<span   class='comment'>"   +   codeArr[i]   +   codeArr[i+1]); 
  i++; 
  }   else   { 
  htmlTxt   +=   (codeArr[i]); 
  } 
  
  }   else   if   (codeArr[i]   ==   "*")   { 
  if   (codeArr[i+1]   ==   "/")   { 
  if   (slash_slash_comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   continue; 
  } 
  if   (slash_star_comment_opened)   { 
  slash_star_comment_opened   =   false; 
  htmlTxt   +=     (codeArr[i]   +   codeArr[i+1]   +"</span>"); 
  i++; 
  } 
  }   else   { 
  htmlTxt   +=   (codeArr[i]); 
  } 
  
  }   else   if   (codeArr[i]   ==   "/t")   {   //keyword 
  htmlTxt   +=   ("&nbsp;&nbsp;&nbsp;&nbsp;"); 
  }   else   if   (codeArr[i]   ==   "<")   {   //keyword 
  htmlTxt   +=   ("&lt;"); 
  }   else   { 
  htmlTxt   +=   (codeArr[i]); 
  } 
  
  } 
  htmlTxt   +=   ("</div>"); 
  
  return   htmlTxt; 
  } 
  
  this.isKeyword   =   function(val)   { 
  var   keywordArr   =   this._keywords.split(","); 
  for   (var   i   =   0;   i   <   keywordArr.length;   i++){ 
  if   (keywordArr[i]   ==   val)   { 
  return   true; 
  } 
  } 
  return   false; 
  } 
  
  this.isCommonObject   =   function(val)   { 
  var   keywordArr   =   this._commonObjects.split(","); 
  for   (var   i   =   0;   i   <   keywordArr.length;   i++)   { 
  if   (keywordArr[i]   ==   val)   return   true; 
  } 
  return   false; 
  } 
  } 
  
  function   XMLHighLighter(domNode)   { 
  JavaHighLighter.call(this,domNode); 
  this._keywords="xml"; 
  this._commonObjects="version,encoding" 
  this._wordDelimiters="<?-   //">/n/t"; 
  
  this.highlight   =   function()   { 
  var   codeArr   =   new   Array(); 
  var   word_index   =   0; 
  var   htmlTxt   =   ""; 
  for   (var   i   =   0;   i   <   this._codetxt.length;   i++)   { 
  if   (this._wordDelimiters.indexOf(this._codetxt.charAt(i))   ==   -1)   {   //找不到 
  if   (codeArr[word_index]   ==   null   ||   typeof(codeArr[word_index])   ==   'undefined')   { 
  codeArr[word_index]   =   ""; 
  }   
  
  codeArr[word_index]   +=   this._codetxt.charAt(i); 
  }   else   { 
  if   (typeof(codeArr[word_index])   !=   'undefined'   &&   codeArr[word_index].length   >   0) 
  word_index++; 
  codeArr[word_index++]   =   this._codetxt.charAt(i); 
  }   
  
  } 
  
  
  
  var   quote_opened   =   false; 
  var   comment_opened   =   false; 
  var   line_num=1; 
  var   node_opened   =   false; 
  
  htmlTxt   +=   ("<div   class='code'>"); 
  for   (var   i=0;   i   <   word_index;   i++)   { 
  if   (codeArr[i]   ==   "   ")   { 
  htmlTxt   +=   ("&nbsp;"); 
  }   else   if   (!comment_opened   &&   !quote_opened   &&   this.isKeyword(codeArr[i]))   {   //keyword 
  htmlTxt   +=   ("<span   class='keyword'>"   +   codeArr[i]   +   "</span>"); 
  }   else   if   (!comment_opened   &&   !quote_opened   &&   this.isCommonObject(codeArr[i]))   {   //keyword 
  htmlTxt   +=   ("<span   class='commonobject'>"   +   codeArr[i]   +   "</span>"); 
  }   else   if   (codeArr[i]   ==   "/n")   { 
  htmlTxt   +=   ("<br/>"); 
  line_num++; 
  
  }   else   if   (codeArr[i]   ==   "/"")   { 
  if   (comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   continue; 
  } 
  if   (quote_opened){ 
  htmlTxt   +=   (codeArr[i]+"</span>"); 
  quote_opened   =   false; 
  }   else   { 
  htmlTxt   +=     ("<span   class='string'>"+codeArr[i]); 
  quote_opened   =   true; 
  } 
  }   else   if   (codeArr[i]   ==   "<")   { 
  if   (codeArr[i+1]   ==   "!")   { 
  if   (comment_opened)   { 
  htmlTxt   +=   (codeArr[i]);   
  continue; 
  } 
  comment_opened   =   true; 
  htmlTxt   +=     ("<span   class='comment'>&lt;"   +   codeArr[i+1]); 
  i++; 
  continue; 
  }   
  node_opened   =   true; 
  htmlTxt   +=   ("&lt;<span   class='node'>"); 
  
  }   else   if   (codeArr[i]   ==   "-")   { 
  if   (codeArr[i-1]=="-"   &&   codeArr[i+1]   ==   ">")   { 
  if   (comment_opened)   { 
  comment_opened   =   false; 
  htmlTxt   +=     (codeArr[i]   +   "&gt;</span>"); 
  i++; 
  } 
  }   else   { 
  htmlTxt   +=   (codeArr[i]); 
  } 
  
  }   else   if   (codeArr[i]   ==   "/t")   {   //keyword 
  htmlTxt   +=   ("&nbsp;&nbsp;&nbsp;&nbsp;"); 
  }   else   if   (codeArr[i]   ==   ">")   {   //keyword 
  if   (node_opened)   { 
  htmlTxt   +=   ("</span>&gt;"); 
  }   else 
  htmlTxt   +=   "&gt;"; 
  }   else   { 
  htmlTxt   +=   (codeArr[i]); 
  }   
  
  } 
  htmlTxt   +=   ("</div>"); 
  
  return   htmlTxt; 
  } 
  }


test_java.html      测试对java代码的高亮显示
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style> 
  body   { 
  font:menu; 
  } 
  
  div.code   { 
  font-family:   Courier   New; 
  font-size:12px; 
  color:black; 
  width:99%; 
  height:400px; 
  overflow:auto; 
  border-width:1px; 
  border-style:inset; 
  background-color:#eeeeee; 
  margin:4px; 
  padding:4px; 
  scrollbar-dark-shadow-color:   #FFFFFF;   
  scrollbar-base-color   :   #eeeeee; 
  scrollbar-shadow-color   :#eeeeee; 
  } 
  
  div.code   span.keyword   { 
  color:#0000FF; 
  } 
  
  div.code   span.string   { 
  color:#FF00FF; 
  } 
  
  div.code   span.comment   { 
  color:#008000; 
  } 
  
  div.code   span.commonobject   { 
  color:#FF0000; 
  } 
  </style>
 </head>

 <body>
  <h1>Java代码加亮</h1> 
  java代码： 
  <xmp   id="cod"> 
  /* 
    *   Michael   Chen's   Code,   created   on   2004-7-25 
    *   
    */ 
  package   openbugz.service.impl; 
  
  import   java.util.List; 
  
  import   openbugz.model.Person; 
  import   openbugz.model.Role; 
  import   openbugz.service.UserManager; 
  
  import   org.springframework.orm.hibernate.support.HibernateDaoSupport; 
  
  /** 
    *   
    * 
    *   @author   Michael 
    *   @version   $Id:   HibernateUserManager.java,v   1.1   2004/07/25   10:49:04   michael   Exp   $ 
    */ 
  /** 
    *   
    * 
    *   @author   Michael 
    *   @version   $Id:   HibernateUserManager.java,v   1.1   2004/07/25   10:49:04   michael   Exp   $ 
    */ 
  public   class   HibernateUserManager   extends   HibernateDaoSupport   implements 
                  UserManager   { 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#loadPerson(long) 
            */ 
          public   Person   loadPerson(long   id)   { 
                  return   (Person)getHibernateTemplate().load(Person.class,   new   Long(id)); 
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#createPerson(openbugz.model.Person) 
            */ 
          public   void   createPerson(Person   person)   { 
                  getHibernateTemplate().saveOrUpdate(person); 
  
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#removePerson(openbugz.model.Person) 
            */ 
          public   void   removePerson(Person   person)   { 
                  getHibernateTemplate().delete(person); 
  
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#updatePerson(openbugz.model.Person) 
            */ 
          public   void   updatePerson(Person   person)   { 
                  getHibernateTemplate().update(person); 
  
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#getPersonList() 
            */ 
          public   List   getPersonList()   { 
                  return   getHibernateTemplate().loadAll(Person.class); 
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#addRole(openbugz.model.Person,   openbugz.model.Role) 
            */ 
          public   void   addRole(Person   person,   Role   role)   { 
                  person.getRoles().add(role); 
                  getHibernateTemplate().update(person); 
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#removeRole(openbugz.model.Person,   openbugz.model.Role) 
            */ 
          public   void   removeRole(Person   person,   Role   role)   { 
                  person.getRoles().remove(role); 
                  getHibernateTemplate().update(person); 
  
          } 
          
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#loginPerson(java.lang.String,   java.lang.String) 
            */ 
          public   Person   loginPerson(String   loginName,   String   password)   { 
                  
                  List   l   =   getHibernateTemplate().find("from   Person   p   where   p.loginName   =   ?   and   p.password=?",   
                                  new   String[]   {loginName,   password})   ; 
                  if   (l.size()   ==   0)   { 
                          return   null; 
                  }   else   { 
                          return   (Person)l.get(0); 
                  } 
          } 
  
          /*   (non-Javadoc) 
            *   @see   openbugz.service.UserManager#findPersonByLoginName(java.lang.String) 
            */ 
          public   Person   findPersonByLoginName(String   username)   { 
                  //   TODO   Auto-generated   method   stub 
                  List   l   =   getHibernateTemplate().find("from   Person   p   where   p.loginName=?",   username); 
                  if   (l.size()   ==   0)   { 
                          return   null; 
                  }   else   { 
                          return   (Person)l.get(0); 
                  } 
          } 
  } 
  </xmp> 
  其他文字内容可以放在这里，不影响。 
  <script   language="JavaScript"   src="highlight.js"></script> 
  <script   language="JavaScript"> 
  doHighlight(document.getElementById("cod"),"java"); 
  </script>
 </body>
</html>

test_xml.html   测试对xml代码的高亮显示
--------------------------------------------------------------------
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">  
  <html>  
  <head>  
  <title>页面代码加亮</title>  
  <meta   name="Generator"   content="EditPlus">  
  <meta   name="Author"   content="">  
  <meta   http-equiv="content-type"   content="text/html;   charset=gb2312">  
  <meta   name="Keywords"   content="">  
  <meta   name="Description"   content="">  
  <style>  
  body   {  
  font:menu;  
  }  
   
  div.code   {  
  font-family:   Courier   New;  
  font-size:12px;  
  color:black;  
  width:99%;  
  height:400px;  
  overflow:auto;  
  border-width:1px;  
  border-style:inset;  
  background-color:#eeeeee;  
  margin:4px;  
  padding:4px;  
  scrollbar-dark-shadow-color:   #FFFFFF;    
  scrollbar-base-color   :   #eeeeee;  
  scrollbar-shadow-color   :#eeeeee;  
  }  
   
  div.code   span.keyword   {  
  color:#0000FF;  
  }  
   
  div.code   span.string   {  
  color:#FF00FF;  
  }  
   
  div.code   span.comment   {  
  color:#008000;  
  }  
   
  div.code   span.commonobject   {  
  color:#FF0000;  
  }  
  div.code   span.node   {  
  color:#808000;  
  }  
  </style>  
  </head>  
   
  <body>  
  <h1>XML代码加亮</h1>  
  原有的代码：  
  <xmp   id="cod"><?xml   version="1.0"   encoding="gb2312"?>  
  <!--code   test-->  
  <menubar>  
  <menu   text="报价菜单"   tip=""   url=""   target="">  
  <menuitem>  
  <text>新建报价单</text>  
  <url>newProject.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>打开报价单</text>  
  <url>testpage.htm</url>  
  <target>_blank</target>  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>保存报价单</text>  
  <url>#</url>  
  <target></target>  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>报价单另存为...</text>  
  <url>newProject.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>查询报价单</text>  
  <url>testpage.htm</url>  
  <target>_blank</target>  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>导出...</text>  
  <url>open.html</url>  
  <target></target>  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>打印</text>  
  <url>newProject.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>退出系统</text>  
  <url>testpage.htm</url>  
  <target>_blank</target>  
  <tip></tip>  
  </menuitem>  
  </menu>  
  <menu   text="元件库维护"   tip="about   the   system">  
  <menuitem>  
  <text>添加元件</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>修改元件资料</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>查询元件</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  </menu>  
   
  <menu   text="模板维护"   tip="about   the   system">  
  <menuitem>  
  <text>新建模板</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>修改模板信息</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>查询模板</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  </menu>  
  <menu   text="系统管理"   tip="about   the   system">  
  <menuitem>  
  <text>用户管理</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>角色管理</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>数据库维护</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>日志分析</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>初始环境设定</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  </menu>  
  <menu   text="帮助"   tip="about   the   system"   url="firstpage.html">  
  <menuitem>  
  <text>帮助信息</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  <menuitem>  
  <text>关于本系统</text>  
  <url>a.html</url>  
  <target   />  
  <tip></tip>  
  </menuitem>  
  </menu>  
  <menu   text="导出系统"   tip=""   url="index.htm"   target=""/>  
  </menubar>  
  </xmp>  
  其他内容放这里，不影响显示。  
  <script   language="JavaScript"   src="highlight.js"></script>  
  <script   language="JavaScript">  
  doHighlight(document.getElementById("cod"),"xml");  
  </script>  
  </body>  
  </html>