在contenteditable pre中优化语法高亮

Question

我正在使用谷歌美化来突出显示代码中的代码。 contenteditable pre包含div节点，并在用户按Enter或bspace时为每行创建/删除div。

我的pre元素包含初始代码，全部在一行上（我需要它在一行上，所以它正常工作＆amp;所以没有讨厌的\ n或文本节点在附近）。

<pre contenteditable="true" class="prettyprint"><div>&lt;html&gt;</div><div>&lt;body&gt;</div><div>&lt;script&gt;</div><div>var a =3;</div><div>//this is the problem</div><div>function problem(){ return 3; }</div><div>function wrongColor(){};<div>&lt;/script&gt;</div><div>&lt;/body&gt;</div><div>&lt;/html&gt;</div></pre>

Prettify在执行//one line comments时不喜欢这样，它会多行注释。

解释它的最简单方法是查看小提琴：http://jsfiddle.net/grantk/jwfMr/

我的问题是：有没有一种简单的方法可以使用css或javascript修复此问题而无需修改源代码？

Answer 1

使用每个div节点的innerHTML for循环中的prettyPrintOne()。