使用Markdown在reveal.js中的碎片

Question

reveal.js支持将在HTML中一个接一个显示的片段

<section>
    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment roll-in">roll-in</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>
</section>

它支持使用MarkDown而不是HTML为每张幻灯片使用:

<section data-markdown>
    ## Page title

    A paragraph with some text and a [link](http://hakim.se).
</section>

但我找不到任何使用MarkDown使用片段的文档.我错过了什么或者它还没有得到支持吗？

Answer 1

它现在通过添加标签来支持属性:<!-- .element: class="fragment" -->.

有支持的,如更多的属性background,index等等.参见官方文档例子:元素属性,幻灯片属性.

Answer 2

如果你想在一个降价格式的部分中创建片段,就像jez在他的评论中指出的那样,这就是你需要的

* Item 1 <!-- .element: class="fragment" -->
* Item 2 <!-- .element: class="fragment" -->

原始来源 - https://stevegrunwell.com/blog/building-presentations-reveal-js/(死链接)

还有另一个教程 - http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

Answer 3

我正在使用 pandoc 将降价文件转换为reveal.js 演示文稿。

不知道为什么，但以上答案都不适合我。但是，将文本包含在标记的围栏块中。

使用reveal.js 片段示例https://revealjs.com/fragments/

:::{.element: class="fragment"}
Fade in
:::

:::{.element: class="fragment fade-out"}
Fade out
:::

:::{.element: class="fragment highlight-red"}
Highlight red
:::

:::{.element: class="fragment fade-in-then-out"}
Fade in, then out
:::

:::{.element: class="fragment fade-up"}
Slide up while fading in
:::

Answer 4

对于那些使用pandocMarkdown 制作幻灯片的人，请务必阅读有关幻灯片放映的手册部分 ，特别是有关增量列表的小节。也就是说，后者说你可以：

• 使用选项-i在所有列表上设置增量行为。
• 使用受保护的 div语法在单个列表上 强制 incremental或执行行为：nonincremental

  ::: incremental
  
  - Eat spaghetti
  - Drink wine
  
  :::
  

• 将列表放在块引用内以反转预设行为。

  > - Eat spaghetti
  > - Drink wine
  

这不会为您提供Clay 的答案中建议的细粒度控制 ，但它很简单、有文档记录并且与多种输出格式兼容。

Answer 5

请参考这个问题Markdown insidefragments，我认为fragments只适用于HTML级别。

我想你可以直接操作Markdown转换后的DOM，就像这样：

{ src: 'plugin/markdown/markdown.js',
  condition: function() { return !!document.querySelector( '[data-markdown]' ); },
  callback: function() {
    Array.prototype.forEach.call(document.querySelectorAll('section > p'), function(ele){ ele.className = 'fragment'; });
  }
},