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: 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.

Intertype

Answer 1

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:

Canny

Sorry for the delay accepting, this is great, thanks! For others that find this answer, note that you have to remove the <code> element and add .highlight to your <pre> element, as @kirk-shoop did – Intertype

Cool trick! I ended up modifying the query to this: document.querySelectorAll( '.highlight, pre code' ), which preserves backwards compatibility with code blocks declared with <code> tag. – Ludie

Answer 2

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

Source: Reveal.js docs

Carhop

I wonder why this has so many upvotes - this changes that the <span> is no longer rendered as literal <span> text, but the fragment is still not there – Contraption

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:

Eleazar

Thanks. Have tried. Your first suggestion runs into the same problem as you mentioned in your second suggestion, which is that the first block takes up space (even if you use the fade-out transition), and you would have to dynamically position the other code block to sit on top of it. Not a solution I love. Also, putting two <code> blocks inside the <pre> throws off highlight.js and it doesn't properly syntax highlight the second block – Intertype

This method allows you to show up HTML code by fragments. Thanks! – Tatyanatau