html export with editable/runnable js src blocks?

html export with editable/runnable js src blocks?

[Matt Price]

[-- Attachment #1: Type: text/plain, Size: 632 bytes --]

I feel like I've seen people do this before but my search today did not
turn up a working example online. I'd like to be able to export to html
(and by extension, to a blog or a reveal.js presentation) and have my
source code blocks -- at leas t the javascript ones -- placed in an editing
environment that allows you to actually run the code. the idea is to help
students experiment with code as you're talking about it in class.

Has anyone done this? I know it's not too hard to embed codemirror or ace
in aweb page, but I odn't know how to get org to set the blocks up right.
Would love some suggestions or examples. Thank you!

[-- Attachment #2: Type: text/html, Size: 699 bytes --]

Re: html export with editable/runnable js src blocks?

[Rasmus]

Matt Price <moptop99@gmail.com> writes:

> I feel like I've seen people do this before but my search today did not
> turn up a working example online. I'd like to be able to export to html
> (and by extension, to a blog or a reveal.js presentation) and have my
> source code blocks -- at leas t the javascript ones -- placed in an editing
> environment that allows you to actually run the code. the idea is to help
> students experiment with code as you're talking about it in class.

You could add contenteditable="true" to your <pre ...> tags.  E.g.

    <pre class="src src-emacs-lisp" contenteditable="true">

On this page there’s some ideas for making it live. 

   http://html5doctor.com/the-contenteditable-attribute/

> Has anyone done this? I know it's not too hard to embed codemirror or ace
> in aweb page, but I odn't know how to get org to set the blocks up right.
> Would love some suggestions or examples. Thank you!

Unfortunately, org-html-src-block does not allow you to insert random keys
into <pre...>.  Thus, you would either have to prepare your pages with JS
on pageload, do the correction with org-export-filter-body-functions or
maybe change org-html-src-block to allow the flexibility you need.  You
might need to figure out what you want the final output to be like first.

The IPython notebook (which has some other name these days) might also be
appropriate here, though I don’t know if it does JS...

Hope it helps,
Rasmus

-- 
You people at the NSA are becoming my new best friends!