Question

html,javascript如何使标签里的某个内容实现代码着色？

html,javascript如何使标签里的某个内容实现代码着色？
我是写在<pre>标签里的每一行使用了<br>换行
因为<pre>里并没有任何别的标签,那我怎么去定义 例如内容： 789为黄色 456为红色 123为绿色
请问怎么去实现最好能给个案例和详细说明谢谢！

Answer 1

这需要定义的有规律些，如果只有br换号，还需要去拆分一行一行加span标签，比较麻烦，不如你提前就定义好span和样式；

这个是js原生写法，jquery可能简单一些

<style type="text/css">
.a123{ color:green; }
.a456{ color:red; }
.a789{ color:yellow; }
</style>
<pre id="aaa">
	<span>123</span><br>
    <span>456</span><br>
    <span>789</span><br>
</pre>
<script language="javascript">
var _span=document.getElementById("aaa").getElementsByTagName("span");
for(i=0;i<_span.length;i++){
	var _text=_span.item(i).innerHTML;
	_span.item(i).className="a"+_text;
}
</script>

追问

但是你意思我还得把程序生成的标签给改成添加span是吧？

追答

对，关键是你要干嘛用，如果是要拆分也可以：

var html=document.getElementById("aaa").innerHTML;
var arr= new Array(); //定义一数组
arr=html.split(""); //字符分割

追问

我用了ckeditor编辑器，然后用到里面的 代码编辑器，就象你之前发的这段代码一样。。
我是想要让代码着色 现在的代码只是在模版里以最初的默认颜色展示在内容模版里。。

追答

你的意思，是ckeditor代码高亮状态，ckeditor早期本版可能不带；

1. 最新的版本带代码显示高亮：http://www.csdn.net/article/2014-04-25/2819495

2. 第按网上的教程，修改js添加代码高亮插件：
   http://www.jb51.net/article/58407.htm
   

追问

我现在就是在纠结...
这编辑器显示的是代码高亮,但是显示到用户所看的内容模版里就没有高亮着色...
我的意思是需要自己在模版里嵌套相关的JS来实现内容展示出来变为着色高亮吗?
用CK编辑器是在编辑器里高亮着色还是用编辑器之后,包括展示用户所见的模版里也是代码高亮.
还是需要自行在模版文件里嵌套新的JS才能实现代码高亮?

追答

对，显示高亮也需要引入css和js