JavaScript版代码高亮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript版代码高亮</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="menu_head">JavaScript版代码高亮显示</div>
<div class="content">
<script language="JavaScript" type="text/javascript">
/**
** ======================================================================================
** 类名:CLASS_HIGHLIGHT
** 功能:语法高亮
** 示例:
 var xx  = new CLASS_HIGHLIGHT(code,syntax);
 document.getElementById("display").innerHTML = xx.highlight();
** ======================================================================================
**/

function CLASS_HIGHLIGHT(code,syntax){
 //哈希表类
 function Hashtable(){
  this._hash = new Object();
  this.add = function(key,value){
   if(typeof(key)!="undefined"){
    if(this.contains(key)==false){
     this._hash[key]=typeof(value)=="undefined"?null:value;
     return true;
    } else {
     return false;
    }
   } else {
    return false;
   }
  }
  this.remove  = function(key){delete this._hash[key];}
  this.count  = function(){var i=0;for(var k in this._hash){i++;} return i;}
  this.items  = function(key){return this._hash[key];}
  this.contains = function(key){return typeof(this._hash[key])!="undefined";}
  this.clear  = function(){for(var k in this._hash){delete this._hash[k];}}
 }

this._caseSensitive = true;

//字符串转换为哈希表
 this.str2hashtable = function(key,cs){
  var _key = key.split(/,/g);
  var _hash = new Hashtable();
  var _cs  = true;

if(typeof(cs)=="undefined"||cs==null){
   _cs = this._caseSensitive;
  } else {
   _cs = cs;
  }

for(var i in _key){
   if(_cs){
    _hash.add(_key[i]);
   } else {
    _hash.add((_key[i]+"").toLowerCase());
   }
  }
  return _hash;
 }

//获得需要转换的代码
 this._codetxt = code;
 if(typeof(syntax)=="undefined"){
  syntax = "";
 }

switch(syntax.toLowerCase()){
  case "sql":
   //是否大小写敏感
   this._caseSensitive = false;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("COMMIT,DELETE,INSERT,LOCK,ROLLBACK,SELECT,TRANSACTION,READ,ONLY,WRITE,USE,ROLLBACK,SEGMENT,ROLE,EXCEPT,NONE,UPDATE,DUAL,WORK,COMMENT,FORCE,FROM,WHERE,INTO,VALUES,ROW,SHARE,MODE,EXCLUSIVE,UPDATE,ROW,NOWAIT,TO,SAVEPOINT,UNION,UNION,ALL,INTERSECT,MINUS,START,WITH,CONNECT,BY,GROUP,HAVING,ORDER,UPDATE,NOWAIT,IDENTIFIED,SET,DROP,PACKAGE,CREATE,REPLACE,PROCEDURE,FUNCTION,TABLE,RETURN,AS,BEGIN,DECLARE,END,IF,THEN,ELSIF,ELSE,WHILE,CURSOR,EXCEPTION,WHEN,OTHERS,NO_DATA_FOUND,TOO_MANY_ROWS,CURSOR_ALREADY_OPENED,FOR,LOOP,IN,OUT,TYPE,OF,INDEX,BINARY_INTEGER,RAISE,ROWTYPE,VARCHAR2,NUMBER,LONG,DATE,RAW,LONG RAW,CHAR,INTEGER,MLSLABEL,CURRENT,OF,DEFAULT,CURRVAL,NEXTVAL,LEVEL,ROWID,ROWNUM,DISTINCT,ALL,LIKE,IS,NOT,NULL,BETWEEN,ANY,AND,OR,EXISTS,ASC,DESC,ABS,CEIL,COS,COSH,EXP,FLOOR,LN,LOG,MOD,POWER,ROUND,SIGN,SIN,SINH,SQRT,TAN,TANH,TRUNC,CHR,CONCAT,INITCAP,LOWER,LPAD,LTRIM,NLS_INITCAP,NLS_LOWER,NLS_UPPER,REPLACE,RPAD,RTRIM,SOUNDEX,SUBSTR,SUBSTRB,TRANSLATE,UPPER,ASCII,INSTR,INSTRB,LENGTH,LENGTHB,NLSSORT,ADD_MONTHS,LAST_DAY,MONTHS_BETWEEN,NEW_TIME,NEXT_DAY,ROUND,SYSDATE,TRUNC,CHARTOROWID,CONVERT,HEXTORAW,RAWTOHEX,ROWIDTOCHAR,TO_CHAR,TO_DATE,TO_LABEL,TO_MULTI_BYTE,TO_NUMBER,TO_SINGLE_BYTE,DUMP,GREATEST,GREATEST_LB,LEAST,LEAST_UB,NVL,UID,USER,USERENV,VSIZE,AVG,COUNT,GLB,LUB,MAX,MIN,STDDEV,SUM,VARIANCE");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("'");
   //行注释字符
   this._lineComment = "--";
   //转义字符
   this._escape  = "";
   //多行引用开始
   this._commentOn  = "/*";
   //多行引用结束
   this._commentOff = "*/";
   //忽略词
   this._ignore  = "";
   //是否处理标记
   this._dealTag  = false;
   break;
  case "c#":
   //是否大小写敏感
   this._caseSensitive = true;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("abstract,as,base,bool,break,byte,case,catch,char,checked,class,const,continue,decimal,default,delegate,do,double,else,enum,event,explicit,extern,false,finally,fixed,float,for,foreach,get,goto,if,implicit,in,int,interface,internal,is,lock,long,namespace,new,null,object,operator,out,override,params,private,protected,public,readonly,ref,return,sbyte,sealed,short,sizeof,stackalloc,static,set,string,struct,switch,this,throw,true,try,typeof,uint,ulong,unchecked,unsafe,ushort,using,value,virtual,void,volatile,while");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("String,Boolean,DateTime,Int32,Int64,Exception,DataTable,DataReader");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\"");
   //行注释字符
   this._lineComment = "//";
   //转义字符
   this._escape  = "\\";
   //多行引用开始
   this._commentOn  = "/*";
   //多行引用结束
   this._commentOff = "*/";
   //忽略词
   this._ignore  = "";
   //是否处理标记
   this._dealTag  = false;
   break;
  case "java":
   //是否大小写敏感
   this._caseSensitive = true;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("abstract,boolean,break,byte,case,catch,char,class,const,continue,default,do,double,else,extends,final,finally,float,for,goto,if,implements,import,instanceof,int,interface,long,native,new,package,private,protected,public,return,short,static,strictfp,super,switch,synchronized,this,throw,throws,transient,try,void,volatile,while");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("String,Boolean,DateTime,Int32,Int64,Exception,DataTable,DataReader");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\"");
   //行注释字符
   this._lineComment = "//";
   //转义字符
   this._escape  = "\\";
   //多行引用开始
   this._commentOn  = "/*";
   //多行引用结束
   this._commentOff = "*/";
   //忽略词
   this._ignore  = "";
   //是否处理标记
   this._dealTag  = false;
   break;
  case "vbs":
  case "vb":
   //是否大小写敏感
   this._caseSensitive = false;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("And,ByRef,ByVal,Call,Case,Class,Const,Dim,Do,Each,Else,ElseIf,Empty,End,Eqv,Erase,Error,Exit,Explicit,False,For,Function,Get,If,Imp,In,Is,Let,Loop,Mod,Next,Not,Nothing,Null,On,Option,Or,Private,Property,Public,Randomize,ReDim,Resume,Select,Set,Step,Sub,Then,To,True,Until,Wend,While,Xor,Anchor,Array,Asc,Atn,CBool,CByte,CCur,CDate,CDbl,Chr,CInt,CLng,Cos,CreateObject,CSng,CStr,Date,DateAdd,DateDiff,DatePart,DateSerial,DateValue,Day,Dictionary,Document,Element,Err,Exp,FileSystemObject,Filter,Fix,Int,Form,FormatCurrency,FormatDateTime,FormatNumber,FormatPercent,GetObject,Hex,Hour,InputBox,InStr,InstrRev,IsArray,IsDate,IsEmpty,IsNull,IsNumeric,IsObject,Join,LBound,LCase,Left,Len,Link,LoadPicture,Location,Log,LTrim,RTrim,Trim,Mid,Minute,Month,MonthName,MsgBox,Navigator,Now,Oct,Replace,Right,Rnd,Round,ScriptEngine,ScriptEngineBuildVersion,ScriptEngineMajorVersion,ScriptEngineMinorVersion,Second,Sgn,Sin,Space,Split,Sqr,StrComp,String,StrReverse,Tan,Time,TextStream,TimeSerial,TimeValue,TypeName,UBound,UCase,VarType,Weekday,WeekDayName,Year");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("String,Number,Boolean,Date,Integert,Long,Double,Single");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\"");
   //行注释字符
   this._lineComment = "'";
   //转义字符
   this._escape  = "";
   //多行引用开始
   this._commentOn  = "";
   //多行引用结束
   this._commentOff = "";
   //忽略词
   this._ignore  = "<!--";
   //是否处理标记
   this._dealTag  = false;
   break;
  case "js":
   //是否大小写敏感
   this._caseSensitive = true;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("function,void,this,boolean,while,if,return,new,true,false,try,catch,throw,null,else,int,long,do,var");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("String,Number,Boolean,RegExp,Error,Math,Date");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\",'");
   //行注释字符
   this._lineComment = "//";
   //转义字符
   this._escape  = "\\";
   //多行引用开始
   this._commentOn  = "/*";
   //多行引用结束
   this._commentOff = "*/";
   //忽略词
   this._ignore  = "<!--";
   break;
  case "html":
   //是否大小写敏感
   this._caseSensitive = true;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("function,void,this,boolean,while,if,return,new,true,false,try,catch,throw,null,else,int,long,do,var");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("String,Number,Boolean,RegExp,Error,Math,Date");
   //标记
   this._tags   = this.str2hashtable("html,head,body,title,style,script,language,input,select,div,span,button,img,iframe,frame,frameset,table,tr,td,caption,form,font,meta,textarea",false);
   //得到分割字符
   this._wordDelimiters= "  ,.?!;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\",'");
   //行注释字符
   this._lineComment = "//";
   //转义字符
   this._escape  = "\\";
   //多行引用开始
   this._commentOn  = "/*";
   //多行引用结束
   this._commentOff = "*/";
   //忽略词
   this._ignore  = "<!--";
   //是否处理标记
   this._dealTag  = true;
   break;
  case "xml":
  default:
   //是否大小写敏感
   this._caseSensitive = true;
   //得到关键字哈希表
   this._keywords  = this.str2hashtable("!DOCTYPE,?xml,script,version,encoding");
   //得到内建对象哈希表
   this._commonObjects = this.str2hashtable("");
   //标记
   this._tags   = this.str2hashtable("",false);
   //得到分割字符
   this._wordDelimiters= "  ,.;:\\/<>(){}[]\"'\r\n\t=+-|*%@#$^&";
   //引用字符
   this._quotation  = this.str2hashtable("\",'");
   //行注释字符
   this._lineComment = "";
   //转义字符
   this._escape  = "\\";
   //多行引用开始
   this._commentOn  = "<!--";
   //多行引用结束
   this._commentOff = "-->";
   //忽略词
   this._ignore  = "<!--";
   //是否处理标记
   this._dealTag  = true;
   break;
 }

this.highlight = function() {
  var codeArr = new Array();
  var word_index = 0;
  var htmlTxt = new Array();

//得到分割字符数组(分词)
  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;  //行号
  var quote_char     = "";  //引用标记类型
  var tag_opened     = false; //标记开始

htmlTxt[htmlTxt.length] = ("<div style='font-family: Courier New;font-size:12px;overflow:auto;margin:1px;padding:6px;color:#333333'>");

//按分割字,分块显示
  for (var i=0; i <=word_index; i++){

//处理空行(由于转义带来)
   if(typeof(codeArr[i])=="undefined"||codeArr[i].length==0){
    continue;
   }
   //处理空格
   if (codeArr[i] == " "){
    htmlTxt[htmlTxt.length] = (" ");
   //处理关键字
   } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isKeyword(codeArr[i])){
    htmlTxt[htmlTxt.length] = ("<span style='color:#0000FF;'>" + codeArr[i] + "</span>");
   //处理普通对象
   } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isCommonObject(codeArr[i])){
    htmlTxt[htmlTxt.length] = ("<span style='color:#808000;'>" + codeArr[i] + "</span>");
   //处理标记
   } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && tag_opened && this.isTag(codeArr[i])){
    htmlTxt[htmlTxt.length] = ("<span style='color:#0000FF;'>" + codeArr[i] + "</span>");
   //处理换行
   } else if (codeArr[i] == "\r"){
    if (slash_slash_comment_opened){
     htmlTxt[htmlTxt.length] = ("</span>");
     slash_slash_comment_opened = false;
    }
    htmlTxt[htmlTxt.length] = ("<br/>");
    line_num++;
   //处理双引号(引号前不能为转义字符)
   } else if (this._quotation.contains(codeArr[i])&&!slash_star_comment_opened&&!slash_slash_comment_opened){
    if (quote_opened){
     //是相应的引号
     if (quote_char==codeArr[i]){
      if(tag_opened){
       htmlTxt[htmlTxt.length] = (codeArr[i]+"</span><span style='color:#808000;'>");
      } else {
       htmlTxt[htmlTxt.length] = (codeArr[i]+"</span>");
      }
      quote_opened = false;
      quote_char  = "";
     } else {
      htmlTxt[htmlTxt.length] = codeArr[i].replace(/\</g,"<");
     }
    } else {
     if (tag_opened){
      htmlTxt[htmlTxt.length] =  ("</span><span style='color:#FF00FF;'>"+codeArr[i]);
     } else {
      htmlTxt[htmlTxt.length] =  ("<span style='color:#FF00FF;'>"+codeArr[i]);
     }
     quote_opened = true;
     quote_char  = codeArr[i];
    }
   //处理转义字符
   } else if(codeArr[i] == this._escape){
    htmlTxt[htmlTxt.length] = (codeArr[i]);
    if (i<word_index){
     if (codeArr[i+1].charCodeAt(0)>=32&&codeArr[i+1].charCodeAt(0)<=127){
      htmlTxt[htmlTxt.length] = codeArr[i+1].substr(0,1);
      codeArr[i+1] = codeArr[i+1].substr(1);
     }
    }
   //处理Tab
   } else if (codeArr[i] == "\t") {
    htmlTxt[htmlTxt.length] = ("  ");
   //处理多行注释的开始
   } else if (this.isStartWith(this._commentOn,codeArr,i)&&!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened){
    slash_star_comment_opened = true;
    htmlTxt[htmlTxt.length] =  ("<span style='color:#008000;'>" + this._commentOn.replace(/\</g,"&lt"));
    i = i + this._commentOn.length-1;
   //处理单行注释
   } else if (this.isStartWith(this._lineComment,codeArr,i)&&!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened){
    slash_slash_comment_opened = true;
    htmlTxt[htmlTxt.length] =  ("<span style='color:#008000;'>" + this._lineComment);
    i = i + this._lineComment.length-1;
   //处理忽略词
   } else if (this.isStartWith(this._ignore,codeArr,i)&&!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened){
    slash_slash_comment_opened = true;
    htmlTxt[htmlTxt.length] =  ("<span style='color:#008000;'>" + this._ignore.replace(/\</g,"&lt"));
    i = i + this._ignore.length-1;
   //处理多行注释结束
   } else if (this.isStartWith(this._commentOff,codeArr,i)&&!quote_opened&&!slash_slash_comment_opened){
    if (slash_star_comment_opened) {
     slash_star_comment_opened = false;
     htmlTxt[htmlTxt.length] =  (this._commentOff +"</span>");
     i = i + this._commentOff.length-1;
    }
   //处理左标记
   } else if (this._dealTag&&!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&codeArr[i] == "<") {
    htmlTxt[htmlTxt.length] = "<<span style='color:#808000;'>";
    tag_opened = true;
   //处理右标记
   } else if (this._dealTag&&tag_opened&&codeArr[i] == ">") {
    htmlTxt[htmlTxt.length] = "</span>>";
    tag_opened = false;
   //处理HTML转义符号
   } else if (codeArr[i] == "&") {
    htmlTxt[htmlTxt.length] = "&";
   } else {
    htmlTxt[htmlTxt.length] = codeArr[i].replace(/\</g,"<");
   }
  }
  htmlTxt[htmlTxt.length] = ("</div>");

return htmlTxt.join("");
 }

this.isStartWith = function(str,code,index){
  if(typeof(str)!="undefined"&&str.length>0){
   for(var i=0;i<str.length;i++){
    if(this._caseSensitive){
     if(str.charAt(i)!=code[index+i]||(index+i>=code.length)){
      return false;
     }
    } else {
     if(str.charAt(i).toLowerCase()!=code[index+i].toLowerCase()||(index+i>=code.length)){
      return false;
     }
    }
   }
   return true;
  } else {
   return false;
  }
 }

this.isKeyword = function(val){
  return this._keywords.contains(this._caseSensitive?val:val.toLowerCase());
 }

this.isCommonObject = function(val){
  return this._commonObjects.contains(this._caseSensitive?val:val.toLowerCase());
 }

this.isTag = function(val){
  return this._tags.contains(val.toLowerCase());
 }

}

function doHighlight(o, syntax){
 var htmltxt = "";

if(o == null){
  alert("domNode is null!");
  return;
 }

var _codetxt = "";

if(typeof(o)=="object"){
  switch(o.tagName){
   case "TEXTAREA":
   case "INPUT":
    _codetxt = o.value;
    break;
   case "DIV":
   case "SPAN":
    _codetxt = o.innerText;
    break;
   default:
    _codetxt = o.innerHTML;
    break;
  }
 }else{
  _codetxt = o;
 }

var _syn = new CLASS_HIGHLIGHT(_codetxt,syntax);

htmltxt = _syn.highlight();

return  htmltxt;
}
</script>

<script language="JavaScript" type="text/javascript">
function plaster(){
 document.form1.m.focus()
 document.execCommand("Paste")
}

function goit(stx){
 var code = document.getElementById("m").innerText;
 var xx = new CLASS_HIGHLIGHT(code,stx);
 document.getElementById("highlight").innerHTML = xx.highlight();
}
</script>

<form method="post" name="form1">
<div align="center"><textarea rows="18" name="S1" style="width:99%" id="m"></textarea></div>
<input type="button" value="HTML" onclick="return goit('html')" />
<input type="button" value="VB/VBScript" onclick="return goit('vb')" />
<input type="button" value="JavaScript" onclick="return goit('js')" />
<input type="button" value="C#" onclick="return goit('c#')" />
<input type="button" value="SQL" onclick="return goit('sql')" />
<input type="button" value="XML" onclick="return goit('xml')" />
<input type="button" value="Java" onclick="return goit('java')" />
  <input type="button" value="粘贴" onclick="plaster()" />
<input type="reset" value="清空内容" />
</form>
<div align="center">

</div>
<div id="highlight" align="left" style="width:98%;overflow:auto;word-wrap:word-break;word-break:break-all;"><div>
</div>
</body>
</html>

(0)

相关推荐

  • 高效的表格行背景隔行变色及选定高亮的JS代码

    这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

  • 如何实现正则表达式的JavaScript的代码高亮

    今天想改一下JS的高亮的配色,憋了一下午憋出了这个这个正则表达式. 下面这老长老长了的玩意儿是个正则表达式,看到了别吓坏了. 复制代码 代码如下: /(\/\/.*|\/\*[\S\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|in

  • 2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

  • fckeditor 代码语法高亮

    先是IE: 1.遗留的问题:隐藏的源码和格式化后的代码有会有问题. 经上次研究的结果,两处的代码有可能不对,主要是HTML的特别代码,像代码里有标签<div>,JavaScript代码里有&alt等.这里的解决方法很简单:只要替换一下就可以了,不过要注意,在进行格式化之前就进行替换.因为隐藏的代码也是要替换的,最后取的时候也要替换回去,但是要反顺序.代码如下: 复制代码 代码如下: .replace(/&/g, "&") .replace(/<

  • 2016年最热门的15 款代码语法高亮工具,美化你的代码

    前言: 代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,比如编程语言,标记语言,这些语言的语法错误显示是有区别的.语法高亮并不会影响文本自身的意义,而且能很好的符合人们的阅读习惯. 目前,有很多免费而且有用的代码高亮脚本.这些脚

  • javascript网页关键字高亮代码

    //高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/

  • ASP语法高亮类代码

    此类高亮根据Editplus高亮来做的 复制代码 代码如下: Class Wyd_AspCodeHighLight  Private RegEx  Public Keyword,ObjectCommand,Strings,VBCode  Public KeyWordColor,ObjectCommandColor,StringsColor,Comment,CodeColor    Private Sub Class_Initialize()      Set RegEx = New RegExp

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

  • jQuery语法高亮插件支持各种程序源代码语法着色加亮

    1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮.支持的语言包括: •Python •Ruby •Perl •PHP •XML •HTML •CSS •Django •Javascript •VBScript •Delphi •Java •C++ •RenderMan (RSL and RIB) •SQL •SmallTalk •Axapta •1C •Ini •Diff •DOS .bat •Bash 2) google-code-prettify

  • 高亮显示web页表格行的javascript代码

    本篇作为开发学习笔记之一. [文] 在web开发中经常遇到需要加亮鼠标指向的表格行的情况.首先说说一般的情况. ·简单尝试 CSS2中允许我们对HTML元素使用hover伪类,这极大的方便了对于表格的样式的控制. 我们从一个小例子开始: XHTML(只列出了表格部分,请自行补完页面,本例在Transational的DTD下通过): 复制代码 代码如下: <table class="datatable" cellspacing="0"> <thead

  • js兼容IE6,IE7菜单高亮显示效果代码

    兼容IE6,IE7菜单高亮显示 *{ font:12px tahoma; } #menu li{ list-style:none; width:88px; height:30px; float:left; background:#EFF1F5; text-align:center; margin:0; overflow:hidden; } #menu li a{ display:block; } #menu li a:link,#menu li a:visited{ text-decoratio

  • 两种简单实现菜单高亮显示的JS类代码

    记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码 代码如下:

  • 用js查找法实现当前栏目的高亮显示的代码

    当前栏目高亮显示        JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回 其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码 代码如下: <div id="nav">   <ul>   <li><a href="http://www.jb51.net/html/list/index_127.htm" 

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

随机推荐