Prettify syntax highlight in contenteditable pre

Question

I am using google prettify to highlight code in a contenteditable pre. The contenteditable pre contains div nodes and creates/deletes divs for each line as the user presses enter or bspace.

My pre element contains initial code, all on one line (I need it to be on one line so it works properly & so there are no pesky \n or text nodes hanging around).

<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 doesn't like this when doing //one line comments, it comments over multiple lines.

The easiest way to explain it is to look at the fiddle: http://jsfiddle.net/grantk/jwfMr/

My question is: is there an easy way to fix this with css or javascript without modifying the source?

Answer 1

Worked it out: prettyPrintOne() in a for loop with the innerHTML of each div node.