Twitter: raymondcamden


Address: Lafayette, LA, USA

Auto-escaping code blocks in Reveal.js

04-25-2013 5,325 views Development, HTML5 7 Comments

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!

7 Comments

  • Commented on 04-25-2013 at 10:55 AM
    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
  • Commented on 04-25-2013 at 10:59 AM
    Tidy it up? What's messy about it? ;)
  • Commented on 04-25-2013 at 1: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.
  • Commented on 04-25-2013 at 1: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.
  • Commented on 04-26-2013 at 11:18 AM
    @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.
  • Commented on 04-26-2013 at 1:44 PM
    Let me ping Hakim to see which he prefers.
  • Commented on 04-26-2013 at 4:40 PM
    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

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty