Reveal.js: Add fragments inside code

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: https://i.sstatic.net/Xeuzi.jpg

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.

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: