Auto-escaping code blocks in Reveal.js

This post is more than 2 years old.

Warning - this falls into the "Cool, but may not be a good idea category." I'm a huge fan of the Reveal.js framework for HTML-based presentations and I've already posted a few of my utilities/tips/etc for making it work better (or at least better for me). One issue I've run into a few times lately is escaping HTML for code slides.

Reveal.js has great support for code coloring (color coding?). Here's a quick screen shot of an example:

In general this works simple enough. Here is how a typical code slide would look.

But if you want to include HTML in your slide then you run into a problem. As you might expect, your HTML will be rendered as, well, HTML, not source code. Typically this isn't a huge deal. Code samples are short and if you type fast, you can replace < and > in a few minutes, but after doing this a few times, and preparing to do some slides focused on HTML5 development, I thought there might be a cooler way.

By default, Reveal.js initializes itself immediately. I modified the code to do this after the DOMContentLoaded event and did some hacking:

As you can see, I simply make use of querySelectorAll to find all of my code blocks. (I could make that selector a bit more precise.) I then simply grab the HTML, escape the < and > characters, and then update the innerHTML property.

Voila!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by andy matthews posted on 4/25/2013 at 7:55 PM

This is a pretty handy option. You should tidy this up and submit it to Hakim. Perhaps you add it as an option in the config or something:

autoEscapeHTMLCodeBlocks = true/false

Comment 2 by Raymond Camden posted on 4/25/2013 at 7:59 PM

Tidy it up? What's messy about it? ;)

Comment 3 by Dan G. Switzer, II posted on 4/25/2013 at 10:37 PM

@Raymond:

Since you're technically rendering that code you could end up running into issues. Why do what a lot of the JS-based templating engines do and use a script element instead. You could just take script tag and replace it with the correct DOM elements.

That way the code isn't rendered before writing the source code.

Comment 4 by Raymond Camden posted on 4/25/2013 at 10:42 PM

I was looking for a solution with minimal work for the writer (in this case, me ;). That's interesting though - the script tag would ensure EVERYTHING is cool. Like, I could do a </section> and it wouldn't break the layout.

Comment 5 by Dan G. Switzer, II posted on 4/26/2013 at 8:18 PM

@Raymond:

It would still be minimal work for the writer--just replace <pre><code> with something like <script type="text/x-reveal-code">. It's a little more typing, but would be safer in the long run and you just replace the <script> tag with the <pre><code>.

That's actually how I'd submit a patch to Reveal.js. That way you've got a solution that extends the current functionality, but doesn't break anything. People could just start using that syntax for code samples.

Just a thought.

Comment 6 by Raymond Camden posted on 4/26/2013 at 10:44 PM

Let me ping Hakim to see which he prefers.

Comment 7 by Hakim El Hattab posted on 4/27/2013 at 1:40 AM

First off: this would be a very welcome improvement to reveal.js and I appreciate you taking the time.

I prefer the original idea with string replacement better than using a <script> wrapper since:
- highlight.js automatically picks up <pre><code> elements, with a script wrapper there would need to be more custom integration
- it doesn't require any change in workflow, <pre><code> would still be used for all code