javascript - 在 contenteditable pre 中美化语法高亮

Question

我正在使用 google prettify 在内容可编辑的 pre 中突出显示代码。contenteditable pre 包含 div 节点，并在用户按下 enter 或 bspace 时为每一行创建/删除 div。

我的 pre 元素包含初始代码，所有代码都在一行上(我需要它在一行上以便它正常工作并且没有讨厌的\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 时不喜欢这样，它在多行上进行注释。

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

我的问题是:有没有一种简单的方法可以在不修改源代码的情况下使用 css 或 javascript 解决这个问题？

Answer 1

解决方法:prettyPrintOne() 在每个 div 节点的 innerHTML 循环中。