使用Markdown在reveal.js中创建片段

Question

使用Markdown在reveal.js中创建片段

javascripthtmlmarkdownpresentationreveal.js

32

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中使用片段的文档。我是错过了什么还是它尚未得到支持？

- Uwe L. Korn

5个回答

14

如果您想在Markdown格式的部分中创建片段，就像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/

- vijayshankarv

1

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

第二个链接也挂了。：-( - Pascal

5

我正在使用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
:::

- Clay

1

正是我所需要的。非常感谢。 - Saprativa Bhattacharjee

这会对我的嵌套列表造成混乱。 - ksceriath

5

如果您使用pandoc从Markdown生成幻灯片，请务必阅读手册中关于幻灯片的部分，特别是增量列表的子部分。后者表示您可以：

Use option -i for setting incremental behavior on all lists.
Use fenced div syntax to force incremental or nonincremental behavior on a single list:
```
::: incremental

- Eat spaghetti
- Drink wine

:::
```
Put a list inside a blockquote to reverse the preset behavior.
```
> - Eat spaghetti
> - Drink wine
```

这种方法不能像Clay's answer中所暗示的那样提供细粒度的控制，但它简单易懂，文档完备，且兼容多种输出格式。

- João Manuel Rodrigues

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

4

请参考此问题：分段内使用Markdown语法，我认为分段只适用于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'; });
  }
},

- jifeng.yin

3

我可能有所遗漏，但我认为原帖的问题必须与Markdown中的片段有关（即：是否有一种类似于Markdown的语法，让你可以在Markdown格式的部分内创建片段），而不是片段内部的Markdown。这也是我通过谷歌找到这里的原因。 - jez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fancyoung · Accepted Answer

现在它支持属性，只需添加标签：。

还支持更多属性，例如background、index等。在官方文档中查看更多示例：Element Attributes，Slide Attributes。