使用 Markdown 的reveal.js 中的片段答案

【问题标题】：Fragments in reveal.js using Markdown使用 Markdown 的reveal.js 中的片段
【发布时间】：2012-11-22 06:03:53
【问题描述】：

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 中使用片段的文档。是我遗漏了什么还是不支持？

【问题讨论】：

标签： javascript html markdown presentation reveal.js

【解决方案1】：

它现在支持属性，通过添加标签：。

支持更多属性，如background、index等。更多示例见官方文档：Element Attributes、Slide Attributes。

【讨论】：

但是我不明白重点；加入这些属性比暂时退出 Markdown 需要更多的工作。有捷径吗？太好了，这是可行的，但是在markdown的情况下，它没有帮助。
这对我不起作用。列表中的所有内容都会立即显示。
好的，出于某种原因，我必须将列表包装在<script type="text/template"> 中，如文档中的示例所示。这是关于什么的？

【解决方案2】：

如果您想在 jez 在他的评论中指出的那样在 markdown 格式的部分中创建片段，这就是您所需要的

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

【讨论】：

更新信息。添加了另一个教程作为解决方法。

【解决方案3】：

我正在使用 pandoc 将 markdown 文件转换为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
:::

【讨论】：

正是我想要的。非常感谢。
这弄乱了我的嵌套列表

【解决方案4】：

对于那些使用pandoc 从markdown 制作幻灯片的人，请务必阅读手册关于slide shows的部分特别是， incremental lists 上的小节。也就是说，后者说你可以：

使用选项-i 设置所有列表的增量行为。
使用 fenced div 语法强制 incremental 或 nonincremental 在单个列表上的行为：
```
::: incremental

- Eat spaghetti
- Drink wine

:::
```
在块引用中放置一个列表以反转预设行为。
```
> - Eat spaghetti
> - Drink wine
```

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

【讨论】：

谢谢！这解决了我的问题。 Clay 的答案在嵌套列表中效果不佳

【解决方案5】：

请参考这个问题Markdown inside 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'; });
  }
},

【讨论】：

我可能遗漏了一些东西，但我认为 OP 的问题一定是关于 Fragments-inside-markdown 的（即：是否有类似 markdown 的语法可以让您在 markdown 格式的部分中创建片段），而不是markdown-inside-fragments。这也是我在这里搜索的原因。