Please take what follows with a Titanic-sized grain of salt and do your best not to do what I did, but despite that, I thought this little hack was interesting and I figured I’d share it anyway. I typically use Reveal.js for my presentations, especially when talking about the web platform, as it makes it easy to do slides and demos, all in my browser.

Usually when I want to embed live code in a slide, I just use a CodePen embed. While this works well, sometimes it feels like overkill for real short code samples. I wondered if it would be possible to execute code directly in the slide itself such that I could show a one-liner in the slide, and then the result after. This is what I came up with.

First, consider a slide with some code on it:

<section><h2>Example</h2><pre><code class="language-js" data-trim>let now = new Date();// defaults for everythingconsole.log(new Intl.DateTimeFormat().format(now));</code></pre></section>

In this slide, I create a new Date object and then use Intl.DateTimeFormat to display it. I wanted the final result, which would have been in the console, to show up in the slide.

I decided on a data-attribute that would contain the code for this such that the result of executing the code would be one value only:

<section data-execute="let now = new Date();new Intl.DateTimeFormat().format(now);">

I then added a paragraph tag to handle the result:

<p class="fragment result"></p>

The fragment class there tells Reveal to not display it until I hit the right arrow. Therefore I’d get the code sample first:

And when I hit the right arrow:

How did I handle it? Reveal.js has support for multiple event handlers, including on a slide change. Here’s what I did:

Reveal.on('slidechanged', (event) => {	if(event.currentSlide.dataset.execute) {		console.log('going to eval', event.currentSlide.dataset.execute);		let result = eval(event.currentSlide.dataset.execute);		let $ result = event.currentSlide.querySelector('p.result');		$ result.innerHTML = result;	}});

Basically, if the DOM for the slide had a data attribute named execute, use eval on the string and update a paragraph with class result inside the slide.

Overkill? Probably. But this particular presentation had multiple date examples and I really wanted it to show "live" results. If for some reason this abomination interests you, you can find it in my slide deck here: https://github.com/cfjedimaster/intl-is-your-superhero

And to be clear, don’t use eval.

Raymond Camden