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.stack.imgur.com/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.

score 17 · Answer 1 · edited Sep 27 '22 at 20:33

17

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

Source: Reveal.js docs

edited Sep 27 '22 at 20:33

Potherca

13,207
5
76
94

answered Apr 11 '16 at 08:59

urbando

335
3
9

score 10 · Accepted Answer · answered Aug 20 '14 at 03:29

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: slide before fragments slide at fragment 1 slide at fragment 2

Sorry for the delay accepting, this is great, thanks! For others that find this answer, note that you have to remove the `` element and add `.highlight` to your `` element, as @kirk-shoop did — baylee, Aug 23 '14 at 22:17
Cool trick! I ended up modifying the query to this: `document.querySelectorAll( '.highlight, pre code' )`, which preserves backwards compatibility with code blocks declared with `` tag. — meetamit, Apr 26 '15 at 06:29

score 2 · Answer 3 · answered Jun 11 '14 at 09:24

2

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: enter image description here

answered Jun 11 '14 at 09:24

mahish

975
7
15

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 `` blocks inside the `` throws off highlight.js and it doesn't properly syntax highlight the second block
– baylee Jun 12 '14 at 17:54
This method allows you to show up HTML code by fragments. Thanks! – AlbertoFdzM Aug 31 '15 at 13:20

Reveal.js: Add fragments inside code

3 Answers3