Fragments in reveal.js using Markdown

javascript html markdown presentation reveal.js

16,709

Solution 1

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.

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

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

16,709

Author by

Uwe L. Korn

Data Engineering at QuantCo Inc.; building data engineering systems with Python. Apache Arrow and Parquet PMC/committer.

Updated on June 25, 2022

Comments

Uwe L. Korn almost 2 years

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?

jez over 8 years

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.
vijayshankarv about 6 years

Updated info. Added another tutorial as a workaround.
Mike Williamson almost 6 years

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.
Saprativa Bhattacharjee almost 3 years

Exactly what I was looking for. Thanks a lot.
Moss almost 3 years

This is not working for me. All the things on the list just display at once.
Moss almost 3 years

OK, for some reason I have to wrap the list in <script type="text/template"> as shown in the example in the documents. What is that about?
ksceriath over 2 years

This messes up with the nested lists for me
ksceriath over 2 years

Thanks! This solves my problem. Clay's answer didn't play well with nested lists
Pascal about 2 years

Aaaand the second link is dead as well. :-(