From mboxrd@z Thu Jan 1 00:00:00 1970 From: Matt Price Subject: Re: teaching with live-updating code examples Date: Sat, 10 Dec 2016 00:19:21 -0500 Message-ID: References: <87mvg5a9xi.fsf@ucl.ac.uk> <68509a97983e4d4e9eaca4922725c87a@HE1PR01MB1898.eurprd01.prod.exchangelabs.com> <87oa0l58bk.fsf@ucl.ac.uk> Mime-Version: 1.0 Content-Type: multipart/alternative; boundary=001a1147c69c5e0b3e05434703b5 Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:39374) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1cFa5C-00067M-1x for emacs-orgmode@gnu.org; Sat, 10 Dec 2016 00:20:27 -0500 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1cFa58-0002Ze-Sw for emacs-orgmode@gnu.org; Sat, 10 Dec 2016 00:20:26 -0500 Received: from mail-io0-f178.google.com ([209.85.223.178]:36682) by eggs.gnu.org with esmtps (TLS1.0:RSA_AES_128_CBC_SHA1:16) (Exim 4.71) (envelope-from ) id 1cFa58-0002ZW-Ks for emacs-orgmode@gnu.org; Sat, 10 Dec 2016 00:20:22 -0500 Received: by mail-io0-f178.google.com with SMTP id a81so84636469ioe.3 for ; Fri, 09 Dec 2016 21:20:22 -0800 (PST) In-Reply-To: <87oa0l58bk.fsf@ucl.ac.uk> List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: "Emacs-orgmode" To: Org Mode --001a1147c69c5e0b3e05434703b5 Content-Type: text/plain; charset=UTF-8 On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga 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: 
[1,2,3].map ((x) => x + 1)
- klipse, which instantiates a new instance of CodeMirror for every appropriately formatted set of tags in the form: [1,2,3].map ((x) => x + 1) Meanwhile, html export (and also reveal export) will give something more like: 
[1,2,3].map
((x) => x + 1)

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

--001a1147c69c5e0b3e05434703b5
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable




On Fri, Dec 9, 2016 at 12:19 PM, Eric S Fraga <e.fraga@ucl.ac.uk&g=
t; wrote:
On Friday,=C2=A0 9 Dec 2016 at 16:42, Matt Price wrote:
> I think I am getting closer, actually (details soon, when I have a

> fully working=C2=A0 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 edit=
or instance to the presentation, and which shows the live rendering of HTML=
, CSS, and JS code when the html encoding follows the format:
<<=
span class=3D"gmail-pl-ent">pre><=
code class=3D"hljs js" data-trim <=
span class=3D"gmail-pl-e">contenteditable>
[1,2,3].map ((x) =3D> x + 1)
</code></pre>

- klipse, which=C2=A0 instantiat=
es a new instance of CodeMirror for every appropriately formatted set of ta=
gs in the form: 
<klipse-snippet data-=
language=3D"javascript&q=
uot;>
[1,2,3].map ((x) =3D> x + 1)
</=
klipse-snippet>

Meanwh=
ile, html export (and also reveal export) will give something more like:
<pre  class=3D"src src-javascript"=
;><span style=3D"color: #8c8c8c;">[</span>1,2,3<span style=3D"color:=
 #8c8c8c;">]</span>.map <span style=3D=
"color: #8c8c8c;">((</span><=
span>x<span style=3D"color: #8c8c8c;">)</span> =3D=
&gt; x + 1<span style=3D&qu=
ot;color: #8c8c8c;"><=
span>)</span>

I would like to conditi=
onally 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 somethi=
ng in the header like "make-live t"
- klipse-compatible code if (a) a flag "org-reveal-kl=
ipsify is set AND similar conditions to (b) above

- standard html output if neither of the above con=
ditions is met.

<=
span>What are =
the best ways do achieve this, do you think? Thanks guys,
=

Matt


--001a1147c69c5e0b3e05434703b5--