fragment feature of reveal: Check and document

[cderv]

Looking into #73 got me tested several syntax like fenced div or span attributes.

I think this should be documented better to see what works with Pandoc compared to what is document in the JS lib

Resources

• https://revealjs.com/fragments/
• https://pandoc.org/MANUAL.html#inserting-pauses
• https://pandoc.org/MANUAL.html#incremental-lists ?

Example

Tests of different syntax. @apreshill you could have some thoughts about them.

---
title: Fading / incremental / fragment
output:
  revealjs::revealjs_presentation: default
---

# About fragment / incremental slide

Look at the vertical slide after each slide to see the markdown syntax

# Pausing using pandoc syntax

content before the pause

. . .

content after the pause

. . .

Content after another pause

## See code

```markdown
content before the pause

. . .

content after the pause

. . .

Content after another pause

Equivalent to using fenced div

Content before fade

::: fragment content after the pause :::

::: fragment content after the pause :::

See code

Content before fade

::: fragment
content after the pause
:::

::: fragment
content after the pause
:::

Using HTML directly

Fade in

Fade out

Highlight red

Fade in, then out

Slide up while fading in

See code

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment current-visible">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

attributes can be added on divs

::: fragment Fade in :::

::: {.fragment .fade-out} Fade out :::

::: {.fragment .highlight-red} Highlight red :::

::: {.fragment .current-visible} Fade in, then out :::

::: {.fragment .fade-up} Slide up while fading in :::

See code

::: fragment
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .current-visible}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

See output

it create unnecessary divs

<div class="fragment visible" data-fragment-index="0">
<p>Fade in</p>
</div>
<div class="fragment fade-out visible" data-fragment-index="1">
<p>Fade out</p>
</div>
<div class="fragment highlight-red visible" data-fragment-index="2">
<p>Highlight red</p>
</div>
<div class="fragment current-visible visible" data-fragment-index="3">
Fade in, then out
<p></p>
</div>
<div class="fragment fade-up visible" data-fragment-index="4">
<p>Slide up while fading in</p>
</div>

But it works on span too

[Fade in]{.fragment}

[Fade out]{.fragment .fade-out}

[Highlight red]{.fragment .highlight-red}

[Fade in, then out]{.fragment .current-visible}

[Slide up while fading in]{.fragment .fade-right}

See code

[Fade in]{.fragment}

[Fade out]{.fragment .fade-out}

[Highlight red]{.fragment .highlight-red}

[Fade in, then out]{.fragment .current-visible}

[Slide up while fading in]{.fragment .fade-up}

See output

<h1>Does it works on span ?</h1>
<p><span class="fragment" data-fragment-index="0">Fade in</span></p>
<p><span class="fragment fade-out" data-fragment-index="1">Fade out</span></p>
<p><span class="fragment highlight-red" data-fragment-index="2">Highlight red</span></p>
<p><span class="fragment current-visible" data-fragment-index="3">Fade in, then out</span></p>
<p><span class="fragment fade-up" data-fragment-index="4">Slide up while fading in</span></p>

You just can't add attributes on any Markdown element

Not yet at least: https://github.com/jgm/pandoc/issues/684

[cderv]

Using incremental list with revealjs also use the fragment feature on <li> node. So it will apply the fragment class only on the list items

::: incremental

- Eat spaghetti
- Drink wine

:::

<ul>
<li class="fragment visible current-fragment" data-fragment-index="0">Eat spaghetti</li>
<li class="fragment" data-fragment-index="1">Drink wine</li>
</ul>

It does not seem possible to use markdown syntax within Pandoc to customize the attributes on each bullet though. But that is easier than using attributes on spans

[rleyvasal]

This looks promising, hopefully it can be implemented in v1.0.

[cderv]

If you are interested in newest feature for HTML side with revealjs, you could be interested in Quarto HTML slide format: https://quarto.org/docs/presentations/revealjs/

Quarto is a next-generation publishing tools, inspired by R Markdown experience, made for broader usage (R, Python, Julia, ...). See about R Markdown and Quarto context also: https://quarto.org/docs/faq/rmarkdown.html (and https://yihui.org/en/2022/04/quarto-r-markdown/)

We will not make any big new feature in the revealjs package, but I probably try to add this one in v1 documentation. Note that this should be working with current dev version of revealjs R package