https://github.com/emilhvitfeldt/quarto-roughnotation
An extension that uses the roughnotation javascript library to add animated annotations to revealjs documents.
https://github.com/emilhvitfeldt/quarto-roughnotation
quarto quarto-extension quarto-pub quartopub
Last synced: 4 days ago
JSON representation
An extension that uses the roughnotation javascript library to add animated annotations to revealjs documents.
- Host: GitHub
- URL: https://github.com/emilhvitfeldt/quarto-roughnotation
- Owner: EmilHvitfeldt
- Created: 2022-09-08T04:56:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-27T18:54:18.000Z (over 2 years ago)
- Last Synced: 2025-04-09T22:12:07.112Z (12 months ago)
- Topics: quarto, quarto-extension, quarto-pub, quartopub
- Language: JavaScript
- Homepage: https://emilhvitfeldt.github.io/quarto-roughnotation/
- Size: 2.05 MB
- Stars: 67
- Watchers: 2
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# roughnotation
An extension that uses the [roughnotation](https://roughnotation.com/) 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:
``` bash
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:
``` markdown
---
title: Simple roughnotation setup
filters:
- roughnotation
---
```
Then use the `.rn-fragment` class to specify what elements should be highlighted.
``` markdown
[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`:
``` markdown
[underlined phrase]{.rn-fragment rn-type=underline rn-color=red}
```
For full documentation and examples, visit the [documentation site](https://emilhvitfeldt.github.io/quarto-roughnotation/).
## Code Chunk Annotations (with Flourish)
You can annotate specific text within code chunks by combining roughnotation with the [flourish](https://github.com/kbodwin/flourish) extension.
### Setup
Install both extensions:
```bash
quarto add EmilHvitfeldt/quarto-roughnotation
quarto add kbodwin/flourish
```
Add both as filters (flourish must come first):
```yaml
---
title: Code annotations
filters:
- flourish
- roughnotation
---
```
### Usage
Use flourish's `style` option to pass roughnotation config via CSS custom properties:
````markdown
```{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](https://github.com/EmilHvitfeldt/quarto-roughnotation/blob/main/examples/example-flourish.qmd) for more examples.