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?

Answer 1

It support attributes now, by adding tag: <!-- .element: class="fragment" --> .

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

Answer 2

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/

Answer 3

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

Answer 4

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

Answer 5

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.