标题:html编辑器代码样式颜色效果
只看楼主
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
结帖率:100%
已结贴  问题点数:20 回复次数:6 
html编辑器代码样式颜色效果
那些HTML编辑器的插入代码时,代码会根据属性及关键字设置相应的颜色高亮显示。。

我们编程论坛的也有类似的功能。
如下在的效果,这种设置颜色的是如何实现的?
程序代码:
<%

 dim xmlhttp

 set xmlhttp = server.createobject("Microsoft.XMLHTTP")

 xmlhttp.open "get","http://www.baidu.com",false

 xmlhttp.send

 response.write xmlhttp.responseText
%>

搜索更多相关主题的帖子: 颜色 html 样式 效果 编辑器 
2010-08-23 15:42
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
得分:10 
关键字高亮
先设置常见的关键字字典
遍历所有的代码,在代码两边加span,然后设置颜色
2010-08-23 17:41
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
得分:0 
噢。。

这个明白了。。

就是有些比较特别的如html

<div class="bc">内容</div>

class="bc"  这里的内容如何来判断的?

还有asp的注释

'我是注释内容...(不管这里有多少个字。都会变灰色)

等等...一个完整的控制。。

学习编程www.
2010-08-23 19:07
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
得分:10 
程序代码:
<textarea id="txt" style="width:500px;height:150px;"></textarea>
<br/>
<select id="sel">
     <option value='asp'>ASP</option>
     <option value='js'>javascript</option>
    </select>
    <br/>
    <input type="button" value="CHANGE" onclick="bb();"/>
    <div id="div"  style="width:500px;height:150px;"></div>
<script type="text/javascript">
function bb(){
var $=function(id){return document.getElementById(id).value;}
if($('txt')==""){alert('空值');return;}
txt=$('txt').replace(/</g, "&lt;").replace(/>/g, "&gt;");
txt="<pre><code>"+txt+"</code></pre>";
reg=/(break|delete|function|return|typeof|case|document|if|switch|var|catch|else|this|void|continue|false|instanceof|throw|while)/gim;//JS关键字高亮,可以自己添加或分类!
reg1=/(\s*\'.*)/gim;//ASP注释用的!
reg2=/(\s*\/\/.*)/gim;//javascript注释用的!
str=txt.replace(reg,'<font color="silver">$1</font>');
if($('sel')=='asp')
   {str1=str.replace(reg1,'<font color="silver">$1</font>');}

 else
   {str1=str.replace(reg2,'<font color="silver">$1</font>');}
document.getElementById('div').innerHTML=str1;
}
</script>

   核心就是正则表达式的匹配替换应用,单单一个HTML语法代码的高亮就要写十来行正则来匹配才算比较完整,这里只是说明一个思路的例子!如果要完整的还要考虑(C,VB,C#,JAVA,HTML,PHP,ASP。。。等,哦还有各种脚本,JS,PYTHON,PERL,RUBY。。。等)他们的区别,感觉非常麻烦!估计就算一个高手花几天几夜也不可能写得完整!一般的应用也就是写一些常见的关键字和注释应用,像本论坛的代码高亮就没有分各种语言的区别,统一的处理,不过对于普通应用已经足够了!
  我个人认为代码高亮需求要考虑的要素有很多,主要有变量名、注释、关键字,语法!做到这4点的通用性也就足够适应HTML编辑器里的代码功能了,其他还有很多需要考虑的我暂时没有想到!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-08-24 02:26
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
得分:0 
这个功能需要一整套的js去实现的,自己写的话确实很累
2010-08-24 08:08
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
得分:0 
明白了。谢谢。


学习编程www.
2010-08-24 15:35
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
得分:0 
http://bbs.

在51js帖子看到一个类似的问题,共享参考一下。

学习编程www.
2010-08-25 11:33



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-316565-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.023515 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved