Fragments in reveal.js using Markdown

16,709

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

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'; });
  }
},
Share:
16,709
Uwe L. Korn
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
    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
    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
    vijayshankarv about 6 years
    Updated info. Added another tutorial as a workaround.
  • Mike Williamson
    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
    Saprativa Bhattacharjee almost 3 years
    Exactly what I was looking for. Thanks a lot.
  • Moss
    Moss almost 3 years
    This is not working for me. All the things on the list just display at once.
  • Moss
    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
    ksceriath over 2 years
    This messes up with the nested lists for me
  • ksceriath
    ksceriath over 2 years
    Thanks! This solves my problem. Clay's answer didn't play well with nested lists
  • Pascal
    Pascal about 2 years
    Aaaand the second link is dead as well. :-(