quarto-roughnotation/index.qmd at main · EmilHvitfeldt/quarto-roughnotation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
---
title: "quarto-roughnotation"
subtitle: "Animated hand-drawn annotations for RevealJS presentations"
---

An extension that uses the [roughnotation](https://roughnotation.com/) JavaScript library to add animated, sketch-style annotations to RevealJS documents.

## Installation

```bash
quarto add EmilHvitfeldt/quarto-roughnotation
```

## Quick Start

Add the filter to your YAML header:

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

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

```markdown
[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.

## Examples

### Basic Usage

Full demonstration of all annotation types and options.

[View Example](examples/example.html){.btn .btn-primary}
[Source Code](https://github.com/EmilHvitfeldt/quarto-roughnotation/blob/main/examples/example.qmd){.btn .btn-secondary}

<iframe src="examples/example.html" width="100%" height="500" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>

### Code Chunk Annotations (with Flourish)

Annotate specific text within code chunks by combining roughnotation with the [flourish](https://github.com/kbodwin/flourish) extension.

[View Example](examples/example-flourish.html){.btn .btn-primary}
[Source Code](https://github.com/EmilHvitfeldt/quarto-roughnotation/blob/main/examples/example-flourish.qmd){.btn .btn-secondary}

<iframe src="examples/example-flourish.html" width="100%" height="500" style="border: 1px solid #ccc; border-radius: 4px;"></iframe>

## Annotation Types

| 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 |

## Options

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) |

## Code Chunk Annotations

To annotate code chunks, install both extensions:

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

Add both filters (flourish must come first):

```yaml
filters:
  - flourish
  - roughnotation
```

Use CSS custom properties in flourish's style option:

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

## Links

- [GitHub Repository](https://github.com/EmilHvitfeldt/quarto-roughnotation)
- [RoughNotation Library](https://roughnotation.com/)
- [Flourish Extension](https://github.com/kbodwin/flourish)