Javascript实现CSS代码高亮显示1

/*

*/

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.8;

font-family:'微软雅黑';

}

/*

web:http://www.dovapour.com.cn/

mail:dovapour@gmail.com

QQ:362380046

*/

#area{

width:320px;

height:120px;

line-height:1.5;

font-family:"Courier New", Courier, monospace;

}

/*

ul{

margin:0;

padding:0;

list-style:none;

}

table{

border-collapse:collapse;

border-spacing:0;

}

*/

测试

function $(id) {

return document.getElementById(id);

};

$("btn").οnclick=function(){

var code=$("area").value;

//处理注释:注释替换成 _数字_

var startIdx=endIndex=-1;

var at=0;

var commentList=[];

while(true){

startIndex=code.indexOf("/*",at);

if(startIndex==-1)break;

endIndex=code.indexOf("*/",startIndex);

if(endIndex==-1)break;

at=endIndex+2;

commentList.push(code.substring(startIndex,at));

code=code.replace(commentList[commentList.length-1],"_"+(commentList.length-1)+"_");

}

//字符串

code=code.replace(/(['"]).*\1/g,function(m){return ""+m+""});

//CSS样式值

code=code.replace(/:(.+);/g,function(m,n){return ":"+n+";"});

//CSS样式名称

code=code.replace(/[{}]/g,function(m){

if(m=="{"){

return "{";

}else{

return "}";

}

});

//注释

code=code.replace(/_(\d+)_/g,function(m,n){return ""+commentList[n]+""});

//处理\t

code=code.replace(/^(\t+)/gm,function(m){

return (new Array(m.length+1)).join("    ");

});

//处理空格

code=code.replace(/^( +)/gm, function(m) {

return (new Array(m.length + 1)).join(" ");

});

//处理换行

code=code.replace(/\r?\n/g,"
");

$("pre").innerHTML=code;

}

css如何设置高亮显示,Javascript实现CSS代码高亮显示相关推荐

  1. java js获取css方法_5种JavaScript和CSS交互的方法

    原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...

  2. php边框圆角,css如何设置圆角边框?css设置圆角边框的方法(图文)

    css如何设置边框?很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角边框比如按钮之类的,那么,我们该怎么来设置圆角边框呢?本篇文章将给大家来介绍一下css设 ...

  3. html怎么改无序图标,​css怎么设置无序列表?css的列表样式总结

    css怎么样设置无序列表的样式你知道吗?这里有无序列表的详细应用,去掉这些图标之类的,还介绍了去掉小圆点给添加的图片的介绍,大家可以自己试试看.现在就让我们一起来看看这篇文章吧 首先我们先来看看无序列 ...

  4. php+jq+添加css,jquery设置内联样式css()

    jquery设置内联样式css() 设置内联样式css() .box1 { width: 300px; height: 300px; background-color: wheat; position ...

  5. css 边框设置成不透明,css中如何设置半透明边框?

    可以参考以下我的这个代码: XXX:{ border: 5px solid rgba(XXX, XXX, XXX, 0.5) } 其中第一个XXX是你选择的需要半透明的元素 接下来的XXX是你想要半透 ...

  6. css怎样设置li分栏,css怎么对文字分栏

    css中可利用columns属性或者column-width和column-count属性来对文字进行分栏,只需要给文字元素添加"columns:栏宽度 栏数;"或者"c ...

  7. css表格设置行列的颜色,CSS:为表格中的选定行设置颜色

    我需要将以下功能添加到我的表中:当用户单击某行(选择它)时,该行用颜色#FFCF8B标记(与hover相同).我试过#newspaper-b tbody tr.selected td,但它不起作用.C ...

  8. css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...

    在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...

  9. css中设置文字环绕图片,css 设置文字环绕图片

    要达到的效果是可以环绕图片 最近做的一个项目,有一个具体的要求,是要完成文字对图片的环绕效果,其实不是很难:来做一份随笔,记录一下该做法,大家有什么好的实现方式,也可以互相探讨一下. 这是我自己写的一 ...

最新文章

  1. C++ 可以把变量当成函数用~~
  2. 1086 Tree Traversals Again (25 分)【一般 / 建树 树的遍历】
  3. 「万字图文」史上最姨母级Java继承详解
  4. 企业实战_04_MyCat常用配置文件详解
  5. python来进行社团划分
  6. 为资产分类定义折旧范围_固定资产分类标准及折旧方法5
  7. js中关于0.1+0.1不等于0.2 ,而console.log(0.1)是0.1,面试01
  8. c语言入门自学mobi,算法精解:C语言描述[AZW3][EPUB][MOBI][23.00MB]
  9. python学习笔记3
  10. 【管理学视频课程】关键链的本质--…
  11. POI使用word模板文件循环输出行并导出word
  12. Jenkins免密码登录
  13. 初学者指南:如何毫不费力地优化Jupyter笔记本?
  14. word 中 ctrl+v不能使用问题
  15. Linkflow+小鹅通,打造全链路线上个性化课堂
  16. 前瞻性总结:全球未来十年不可不知的10大趋势
  17. 如何让火狐浏览器开启夜间模式
  18. b站python_B站最受欢迎的Python教程,免费教学视频可以下载了
  19. matlab分析应力应变图,应变分析 (strain analysis).ppt
  20. 免费在线app安全(漏洞)测试工具

热门文章

  1. 红米笔记本linux系统版本,红米note能刷什么系统 Android下安装Kali Linux
  2. Webp格式图片怎么转JPG?教你几种简单好用的转换方法
  3. 被Python红线警告(flake8)逼疯的解决办法,持续更新ing
  4. 同余问题之中国剩余定理 _(:з」∠)_
  5. 微信公众号获取openid(vue)
  6. php从入门到放弃,学习总结
  7. 渗透测试技术分享——nginx日志配置
  8. 关于微信投票怎么免费刷票数及微信投票怎么快速刷票的方法介绍
  9. 仿保卫萝卜Unity塔防游戏开发
  10. python小游戏 拼图小游戏设计与实现