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

Press R to activate notation animations

Highlighting is denoted by adding the .rn class to a div or span using the [text]{.rn} format, so the following markdown is used to create the next line

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

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

Options

There are many types of options we can use (Press R to show)

• type
• animate
• animationDuration
• color
• strokeWidth
• multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
• iterations
• rtl

Options

(Press R to show)

The options are applied by adding arguments like so {.rn rn-color=orange rn-type=circle}

So to add a orange circle or turn off animations by adding rn-animate=false

Note that the arguments are all prefixed with rn-, are not comma-separated, logical values are written as true or false and that strings do not have to be in quotes

Options - types

(Press R to show)

Underline

Box

Circle

Highlight

Strike-Through

Crossed-off

Many types to choose from!

Hyphenated options can be used like so rn-type=strike-through

Options - Multiline

(Press R to show)

The options rn-multiline=true can be added to make a highligher work across multiple lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus. Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis.

All about Time

(Press R to show)

Unless otherwise specified, all annotations will occur at the same time. Set the rn-index to specify order

No rn-index

rn-index set to 1

rn-index set to 2

rn-index set to 3

rn-index set to 4

Fenced divs

You can also use fenced divs if you want to apply the changes to larger sections of of the slide

::: {.rn rn-type=box rn-color=red}
Here is some text

And there is more here
:::

Here is some text

And there is more here

Known issues

doesn’t showcase correctly in RStudio IDE

Sometimes you need to adjust the zoom in your browser to get right results