Slides and extensions

basically shows the 3 extensions samples

gisma team

The title slide is configured by the following part of the yaml header:

---
title: "Slides and extensions"
subtitle: "basically shows the 3 extensions samples"
title-slide-attributes:
  data-background-image: slide1/mof.png
  data-background-size: contain
  data-background-opacity: "0.5"
format: 
  revealjs:
 [...]
---

Header (1|2)

The support of header and footer logic is provided by the plugin reveal-header. it is activated by:

filters:
  - reveal-header

Header (2|2)

In this example you will find a basic header and footer text, pagination and a logo in the upper left corner .

---
title: "Slides and extensions"
subtitle: "basically shows the 3 extensions samples"
title-slide-attributes:
  data-background-image: slide1/mof.png
  data-background-size: contain
  data-background-opacity: "0.5"
format: 
  revealjs:
    slide-number: true
    footer: <gisma 2023>
    header: This is the header extension
    header-logo: slide1/logooil.jpg
[...]
---

Spotlight (1|2)

The support of a pointer or similar pointing features is provided by the plugin spotlight. it is activated by:

revealjs-plugins:
  - spotlight

Spotlight (2|2)

Currently the spotlight is set to a red dot pointer. Just press the left mouse button and use it. It is defined in the header:

---
[...]
format: 
  revealjs:
    slide-number: true
    footer: <gisma 2023>
    header: This is the header extension
    header-logo: slide1/logooil.jpg
    spotlight:
      useAsPointer: true
      size: 5

filters:
  - roughnotation
  - reveal-header
revealjs-plugins:
  - spotlight
---

Highlighting concept

The support of complex highlighting etc. is provided by the plugin roughnotation. it is activated by:

filters:
  - roughnotation

To activate the highlighting interactively press the r key. It will start any notation animations:

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 show correctly in RStudio IDE

Depending on Browser and setting use the CTRL +/- zoom to place the highlights at the correct places

Basic Reference

Find more informations at Quarto RevealJS Documentation

<gisma 2023>

This is the header extension