roughnotation

An extension that uses the roughnotation javascript library to add animated annotations to revealjs documents.

Installation

To install this extension in your current directory (or into the Quarto project that you're currently working in), use the following command:

quarto install extension EmilHvitfeldt/quarto-roughnotation

Usage

The roughnotation extension is implemented as a filter in Quarto. Once installed, using the extension is easy.

Setup

You can enable this like:

---
title: Simple roughnotation setup
filters:
   - roughnotation
---

Then use the .rn-fragment class to specify what elements should be highlighted.

[Highlight me!]{.rn-fragment}

Use arrow keys or spacebar to trigger annotations during your presentation. You can customize annotations with options like rn-type and rn-color:

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

For full documentation and examples, visit the documentation site.

Code Chunk Annotations (with Flourish)

You can annotate specific text within code chunks by combining roughnotation with the flourish extension.

Setup

Install both extensions:

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

Add both as filters (flourish must come first):

---
title: Code annotations
filters:
  - flourish
  - roughnotation
---

Usage

Use flourish's style option to pass roughnotation config via CSS custom properties:

```{r}
#| flourish:
#|   - target: "mean"
#|     style: "--rn-type: circle; --rn-color: red;"
x <- c(1, 2, 3, 4, 5)
mean(x)
```

Available Properties

Property	Example	Description
--rn-type	circle	underline, box, circle, highlight, strike-through, crossed-off, bracket
--rn-color	red	Any CSS color
--rn-animate	true	Enable/disable animation
--rn-animationDuration	800	Duration in ms
--rn-strokeWidth	2	Line thickness
--rn-padding	5	Space around element
--rn-multiline	true	Annotate across lines
--rn-iterations	2	Drawing passes
--rn-brackets	left,right	Bracket sides
--rn-index	1	Fragment order

See example-flourish.qmd for more examples.