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

我让这个工作。我必须更改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>

结果：

Answer 2

我会尝试使用多个<pre class="fragment">并手动将.reveal pre更改为margin: 0 auto;和box-shadow: none;，以便它们看起来像一个代码块。

OR

你试过<code class="fragment">吗？如果您使用负垂直边距来移除单个片段之间的空间，并将相同的背景添加到<pre> <code>，那么您就可以获得所需的内容。

结果：