RevealJS Codefrag

Code annotations, one arrow press at a time.

What the codefrag plugin does, how to enable it, and how annotations become fragments.
Author

Mickaël CANOUIL, Ph.D.

Quarto’s code annotations are a good way to explain a block line by line. On a slide they all arrive at once, so the audience reads the last note while the speaker is still on the first.

codefrag makes each annotation a fragment. The arrow keys step through them, the tooltip appears as each is revealed, and the annotations follow the highlighted lines when both are used.

Installation

quarto add mcanouil/quarto-revealjs-codefrag@1.2.0

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

format:
  revealjs:
    code-annotations: select
revealjs-plugins:
  - codefrag

Then annotate code as you would anywhere in Quarto.

code-annotations: select is what makes the annotations interactive; the plugin turns them into fragments from there.

Try it

The preview deck is built by this site: press the arrow keys and each annotation arrives in turn.

See the Reference for every option, and the Examples for the source behind the deck.

Where it works

RevealJS.

A print-pdf export keeps the stepping as pages: each annotated slide is cloned once per step, with that annotation open.

Back to top