Reveal.js: Add fragments inside code

Question

I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.

So I have something like this:

<pre><code>
def python_function()
    <span class="fragment">display this first</span>
    <span class="fragment">now display this</span>
</code></pre>

But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS

FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.

Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.

Answer 1

To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag

Source: Reveal.js docs

Answer 2

I got this to work. I had to change the init for the highlight.js dependency:

{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { 
    [].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
        hljs.highlightBlock(v);
    });
} },

Then I authored the section this way:

<section>
    <h2>Demo</h2>
    <pre class="stretch highlight cpp">
#pragma once

void step_one_setup(ofApp* app)
{
    auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
        app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
            app->updates.
                <span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
    </pre>
</section>

Results:

Answer 3

I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.

OR

Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.

Result: