RoughNotation

Quarto revealjs presentations

Setup

Add the extension by running the following code in the terminal

quarto install extension EmilHvitfeldt/quarto-roughnotation

Then add it as a filter in the yaml like so

---
title: "RoughNotation"
subtitle: "Quarto revealjs presentations"
format: revealjs
filters:
  - roughnotation
---

Basic Usage

Use arrow keys or spacebar to trigger annotations. Add the .rn-fragment class to any span or div.

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

This text has a highlighted word that appears on trigger.

And this has an underlined phrase.

Options

All options are prefixed with rn-:

Option	Example	Description
rn-type	rn-type=underline	Annotation style (underline, box, circle, highlight, strike-through, crossed-off, bracket)
rn-color	rn-color=blue	Annotation color
rn-animate	rn-animate=false	Disable animation
rn-animationDuration	rn-animationDuration=2000	Animation duration in milliseconds
rn-strokeWidth	rn-strokeWidth=3	Line thickness
rn-padding	rn-padding=10	Space around element in pixels
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 only)
rn-rtl	rn-rtl=true	Draw right-to-left

rn-type

Set the annotation style. Default is highlight.

Underline

Box

Circle

Highlight

Strike-Through

Crossed-off

Bracket

Div with rn-type=box

rn-color

Set the annotation color. Default is yellow highlight color.

Blue | Red | Green | Purple

Div with rn-color=orange

rn-color (formats)

Colors can be specified in multiple formats:

Color name - rn-color=tomato

Hex code - rn-color=#3498db

Hex with alpha - rn-color=#e74c3c80 (50% opacity)

RGB - rn-color="rgb(46, 204, 113)"

RGBA - rn-color="rgba(155, 89, 182, 0.5)"

rn-animate

Disable animation with rn-animate=false. Default is true.

With animation (default)

Without animation

Div without animation

rn-animationDuration

Set animation duration in milliseconds. Default is 800.

Fast (200ms)

Default (800ms)

Slow (2000ms)

Div with 1500ms animation

rn-strokeWidth

Set line thickness. Default is 1.

Thin (1)

Medium (3)

Thick (5)

Div with rn-strokeWidth=4

rn-padding

Set space around the element in pixels. Default is 5.

No padding (0)

Default padding (5)

Large padding (20)

Div with rn-padding=15

rn-multiline

Enable annotations across multiple lines with rn-multiline=true.

Lorem ipsum dolor sit amet. This span wraps across multiple lines to demonstrate the multiline option working correctly. Consectetur adipiscing elit.

This div spans multiple lines and uses multiline mode for proper annotation rendering.

rn-iterations

Set the number of drawing passes. Default is 2. Higher values create rougher look.

One pass (1)

Default (2)

Many passes (5)

Div with rn-iterations=4

rn-brackets

For rn-type=bracket, specify which sides to draw. Options: left, right, top, bottom.

Right bracket (default)

Left bracket

Both sides

Div with top and bottom brackets

rn-rtl

Draw annotation right-to-left with rn-rtl=true. Default is false.

Left-to-right (default)

Right-to-left

Div with right-to-left animation

Ordering

Control order with fragment-index. Lower numbers trigger first.

[Third]{.rn-fragment fragment-index=3}
[First]{.rn-fragment fragment-index=1}
[Second]{.rn-fragment fragment-index=2}

Third

First

Second

Old Usage (R key)

The following 2 slides show the legacy R key interface. This still works but the fragment interface above is recommended.

Basic usage (R key)

Press R to activate notation animations

I will be [highlighted]{.rn}, and so will [these words right here]{.rn}

I will be highlighted, and so will these words right here

Ordering (R key)

(Press R to show)

Set rn-index to control order when using the R key trigger:

No rn-index

rn-index set to 1

rn-index set to 2

rn-index set to 3

rn-index set to 4