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!
Archived Comments
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
Tidy it up? What's messy about it? ;)
@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.
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.
@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.
Let me ping Hakim to see which he prefers.
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