RevealJS Fragmention

Reveal a whole list item, marker and all.

What the fragmention extension is for, how to enable it, and why a bare fragment on a list leaves the bullets behind.
Author

Mickaël CANOUIL, Ph.D.

Putting a RevealJS fragment on a list item marks the text, not the item, so the bullets and numbers all appear at once while the words arrive one by one. The list looks broken for as long as it takes to fill in.

fragmention moves the fragment up to the item. Write an empty marker span at the start and its classes and attributes are hoisted onto the <li>, so the marker arrives with its text.

Installation

quarto add mcanouil/quarto-revealjs-fragmention@0.2.2

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

filters:
  - fragmention

Then start each item with an empty .fragment span:

- []{.fragment fragment-index="1"} First item.
- []{.fragment fragment-index="2"} Second item.
- A normal item, with no fragment.

The span is removed and its classes and attributes land on the item, so RevealJS controls the whole thing.

Seeing it work

This site is HTML, and the filter only matters where fragments do. The RevealJS preview is a deck built by this same site; its first two slides are the same list with and without the filter, which is the whole argument in one step.

See the Reference for every element it handles, and the Examples for the source behind each slide.

Where it works

RevealJS.

Back to top