Reveal.js:在代码中添加片段

Question

我有一个与reveal.js一起运行的演示文稿,一切正常.我正在编写一些示例代码和highlight.js在我的演示文稿中运行良好.但是,我想逐步显示代码.例如,假设我正在向您解释一个函数,我向您展示了第一步,然后想要显示后续步骤.通常,我会使用片段逐步显示项目,但它不能在代码块中工作.

所以我有这样的事情:

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

但<span>元素正在以语法突出显示而不是作为HTML片段读取.它看起来像这样:http://imgur.com/nK3yNIS

没有<span>元素的FYI highlight.js正确地将其读作python,但是使用它<span>,它检测到的语言是coffeescript.

关于如何在代码块中使用片段(或其他模拟方法)的任何想法都将非常感激.

Answer 1

要使片段在代码片段中起作用,您现在可以将该属性data-noescape与<code>标记一起使用

资料来源:Reveal.js docs

Answer 2

我得到了这个工作.我不得不更改highlight.js依赖项的init:

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

然后我用这种方式创作了这个部分:

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

结果: