quarto-roughnotation

Animated hand-drawn annotations for RevealJS presentations

An extension that uses the roughnotation JavaScript library to add animated, sketch-style annotations to RevealJS documents.

Installation

quarto add EmilHvitfeldt/quarto-roughnotation

Add the filter to your YAML header:

---
title: My Presentation
format: revealjs
filters:
  - roughnotation
---

Then use the .rn-fragment class to annotate text:

[highlighted word]{.rn-fragment}
[underlined phrase]{.rn-fragment rn-type=underline rn-color=red}

Use arrow keys or spacebar to trigger annotations as you navigate through slides.

Full demonstration of all annotation types and options.

Annotate specific text within code chunks by combining roughnotation with the flourish extension.

Type	Description
`highlight`	Yellow marker highlight (default)
`underline`	Underline the text
`box`	Draw a box around the element
`circle`	Draw a circle around the element
`strike-through`	Strike through the text
`crossed-off`	Cross off with an X
`bracket`	Draw brackets around the element

All options are prefixed with rn-:

Option	Example	Description
`rn-type`	`rn-type=underline`	Annotation style
`rn-color`	`rn-color=blue`	Annotation color
`rn-animate`	`rn-animate=false`	Disable animation
`rn-animationDuration`	`rn-animationDuration=2000`	Animation duration in ms
`rn-strokeWidth`	`rn-strokeWidth=3`	Line thickness
`rn-padding`	`rn-padding=10`	Space around element
`rn-multiline`	`rn-multiline=true`	Annotate across multiple lines
`rn-iterations`	`rn-iterations=1`	Number of drawing passes
`rn-brackets`	`rn-brackets=left,right`	Bracket sides (for bracket type)

To annotate code chunks, install both extensions:

quarto add EmilHvitfeldt/quarto-roughnotation
quarto add kbodwin/flourish

Add both filters (flourish must come first):

filters:
  - flourish
  - roughnotation

Use CSS custom properties in flourish’s style option:

```{r}
#| flourish:
#|   - target: "mean"
#|     style: "--rn-type: circle; --rn-color: red;"
mean(x)
```