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