Re: teaching with live-updating code examples

[Matt Price <moptop99@gmail.com>]

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

On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga <e.fraga@ucl.ac.uk> 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

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