Re: [O] teaching with live-updating code examples

[Matt Price]

On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga <address@hidden> wrote:

On Friday,  9 Dec 2016 at 16:42, Matt Price wrote:
> I think I am getting closer, actually (details soon, when I have a
> fully working  solution)).

I look forward to seeing it!

OK, I've run into the limits of my knowledge.

There are at least 2 plugins that will give a live code execution environemnt within an HTML presentation:

- RevealEditor, which adds one global Ace editor instance to the presentation, and which shows the live rendering of HTML, CSS, and JS code when the html encoding follows the format:

<pre><code class="hljs js" data-trim contenteditable>
[1,2,3].map ((x) => x + 1)
</code></pre>

- klipse, which  instantiates a new instance of CodeMirror for every appropriately formatted set of tags in the form:

<klipse-snippet data-language="_javascript_">
[1,2,3].map ((x) => x + 1)
</klipse-snippet>

Meanwhile, html export (and also reveal export) will give something more like:

<pre  class="src src-_javascript_"><span style="color: #8c8c8c;">[</span>1,2,3<span style="color: #8c8c8c;">]</span>.map <span style="color: #8c8c8c;">((</span>x<span style="color: #8c8c8c;">)</span> =&gt; x + 1<span style="color: #8c8c8c;">)</span>

I would like to conditionally export 

- revealeditor-compatible code if (a) a flag "org-reveal-use-editor" is set AND (b) the code block meets certain criteria, e.g. language and maybe something in the header like "make-live t"

- klipse-compatible code if (a) a flag "org-reveal-klipsify is set AND similar conditions to (b) above

- standard html output if neither of the above conditions is met.

What are the best ways do achieve this, do you think? Thanks guys,

Matt