Loading External HTML Into Reveal.js Presentations

One of the things I do at Zend is help rehab existing classes. Soon after I was hired, I got my team together and we decided that going forward, all classes would be in Reveal.js. Personally, I like Keynote, but other trainers had PowerPoint. We ended up porting classes to each of the major formats. That means that if you change one, you have to change them all, and we didn’t.

Because Reveal.js is HTML, you can present using just a browser. Our recommendation is to use PHP’s built-in web server so that you get access to features like speaker notes. All-in-all though, Reveal.js looks like it is going to be a solid solution for us.

One Problem

The one problem we have run into is that our slide decks are large. A single class could be 300-500+ slides. Yes, we could break them up into multiple presentations, but we would rather have them as a single presentation.

We are not the first people to want this. In reading the issues on the Reveal.js repo, I ran into this request “Support for external HTML” from 2013 by my friend Larry Garfield. Since this was important to Zend and our presentations, I decided to take a crack at it.

If you read the thread that Larry started, you will see that it was suggested that he use the Markdown plugin for Reveal.js. It would load external files. I played with this plugin for a while. Yes, it would load external files of any kind, it does a lot of post processing to the content because it assumes it is Markdown. This post processing is complex enough so that after about 3 slides,  it starts to affect the outcome. In our case, the title slide lost its image as soon as we added a 4th slide to the external file.

One Solution

So, I did what any decent programmer would do, I stole code from the Markdown plugin and created External. External is just the loader from Markdown, stripped of all its post processing. It is a very simple solution, but this problem did not require a more complex one. I do note in the header comments of External.js that it was blatantly ripped off from Markdown.

The README in the External repo gives instructions on how to install it and how to implement it.

For those who have heard me talk about PHP, this is “Scratch your own itch” development. I needed it, I wrote it, I am sharing it with you.

And yes, I realize I could have solved this with a simple <?php include...?>, but then it would only work if you were actually using the PHP server. I wanted something that would work no matter what your setup.