Fragments in reveal.js using Markdown

Question

reveal.js supports fragments which will be shown one after another in 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>

It supports using Markdown instead of HTML for each slide using:

<section data-markdown>
    ## Page title

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

But I could not find any documentation on using fragments with Markdown. Did I miss something or is it not yet supported?

Fancyoung · Answer 1 · 2020-11-24T02:36:10.667

34

It support attributes now, by adding tag: .

There are more attributes supported such as background, index, etc. See more examples on official doc: Element Attributes, Slide Attributes.

edited Nov 24 '20 at 02:36

answered Feb 11 '14 at 03:05

Fancyoung

2,313
26
32

2

But I don't understand the point; putting in these attributes is more work than just stepping out of Markdown for a while. Is there a shortcut? It's great this is feasible, but in the case of markdown, it is not helpful. – Mike Williamson Sep 09 '18 at 22:44
This is not working for me. All the things on the list just display at once. – Moss Aug 28 '21 at 00:04
OK, for some reason I have to wrap the list in ` – Moss Aug 28 '21 at 00:09

vijayshankarv · Answer 2 · 2018-04-26T13:44:51.253

14

If you are looking to create fragments inside a markdown formatted section as jez pointed out in his comment, this is what you need

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

Original source - https://stevegrunwell.com/blog/building-presentations-reveal-js/ (dead link)

There is another tutorial - http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/

edited Apr 26 '18 at 13:44

answered Sep 21 '16 at 13:59

vijayshankarv

325
2
6

1

Updated info. Added another tutorial as a workaround. – vijayshankarv Apr 26 '18 at 13:45
Aaaand the second link is dead as well. :-( – Pascal Jun 01 '22 at 15:16

score 5 · Answer 3 · answered Feb 02 '21 at 16:53

5

I am using pandoc to convert a markdown file into a reveal.js presentation.

Not sure why, but none of the above answers worked for me. However, enclosing the text in a tagged fenced block did.

Using the reveal.js fragment examples 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
:::

answered Feb 02 '21 at 16:53

Clay

2,584
1
28
63

1

Exactly what I was looking for. Thanks a lot. – Saprativa Bhattacharjee Jul 21 '21 at 09:52
This messes up with the nested lists for me – ksceriath Dec 13 '21 at 13:26

João Manuel Rodrigues · Answer 4 · 2021-08-04T08:30:11.960

For those using pandoc to produce slides from markdown, be sure to read the manual section on slide shows and specifically, the subsection on incremental lists. Namely, the latter says you can:

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

This does not give you the fine-grained control suggested on Clay's answer, but it is simple, documented, and compatible with multiple output formats.

Thanks! This solves my problem. Clay's answer didn't play well with nested lists — ksceriath, Dec 13 '21 at 13:27

score 4 · Answer 5 · edited May 14 '21 at 11:34

4

Please refer to this issue Markdown inside fragments, and I think that fragments only apply to the HTML level.

I think you may manipulate the DOM after Markdown transformed directly, just like this:

{ 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'; });
  }
},

edited May 14 '21 at 11:34

Matthias Braun

32,039
22
142
171

answered Mar 12 '13 at 05:52

jifeng.yin

2,081
1
21
19

3

I may be missing something, but I think the OP's question must be about fragments-inside-markdown (i.e.: is there a markdown-like syntax that lets you create fragments inside a markdown-formatted section), rather than markdown-inside-fragments. That's what I googled my way here for, too. – jez Oct 07 '15 at 20:48

Fragments in reveal.js using Markdown

5 Answers5