[O] teaching with live-updating code examples

[Matt Price]

I am preparing a set of lectures for a class teaching HTML, CSS, and _javascript_ ot humanities students.

I would like to have slides with a simple code editor on one side, and the results of the code on another:

------------------------------------------------------------------------

| [1,2,3].map(function(x){return x + 1;})   |   Array[2,3,4] |
------------------------------------------------------------------------

or in other cases

------------------------------------------------------------------------

|<h1>Hello</h1>    | Hello in appropriate format      |
-------------------------------------------------------------------------

The former, at least, is pretty straightforward to do in CodeMirror with the klipse plugin.  However, codemirror integrates poorly with reveal.js, which is how I normally export my slides. 

So, I'm looking for other solutions. What do other people do in lecture? I'd really like to be able to keep all my notes and code in a single org file, if at all possible.  I'm willing to switch away from reveal, but since this is a course about the web I'd really like to kep it in an HTML format if I can. 
On the other hand if you have a great solution I'd love to hear about it no matter what!

Thanks everyone!

Matt