Demo Basic Slides

RaukR 2025 • R Beyond the Basics

Roy Francis

08-May-2025

Introduction

Note

This is a demo to showcase the RaukR presentation design guide, usage and capabilities of this presentation system. This presentation is created using quarto. This presentation uses the javascript library revealjs as the underlying framework.

Getting started

In RStudio, File > New File > Quarto Presentation
Add YAML matter to the top if not already there.

---
title: "This is a title"
format:
  revealjs
---

Click the Render button for a rendered preview.
Or use quarto render in the terminal:

quarto render slide.qmd

Slides

Slide separators

Slides are separated by ##. Incremental content on is separated by . . . like below.

Hide or not count a slide:

## Slide Title {visibility="hidden"}
## Slide Title {visibility="uncounted"}

. . .

Slide notes

Any content inside class .notes on a slide are notes. This is only visible in presenter mode (by pressing s).

. . .

Keyboard shortcuts

Press ? for help.

Layout

The slide content can be organized into columns which can be nested if needed.

:::{.columns}
:::{.column width="50%"}
<div style="background-color:#fdebd0">Left content</div>
:::

:::{.column width="50%"}
<div style="background-color:#eaf2f8">Right content</div>

:::{.column width="60%"}
<div style="background-color:#d0ece7">Inner left</div>
:::
:::{.column width="40%"}
<div style="background-color:#f2d7d5">Inner right</div>
:::

:::
:::

Left content

Right content

Inner left

Inner right

Content for Tab A

Content for Tab B

Text Formatting

Rendering of normal text, numbers and symbols.

ABCDEFGHIJKLMNOPQRSTUYWXYZÅÄÖ

abcdefghijklmnopqrstuvwxyzåäö

0123456789

!“#%&/()$@*^~<>-:;,_±|?+=

!"#%&/\()$@*^~<>-:;,_±|?+=

Text formatting

Headings can be defined as shown below.

## Level 2 heading  
### Level 3 heading  
#### Level 4 heading  
##### Level 5 heading  
###### Level 6 heading

Level 3 heading

Level 4 heading

Level 5 heading

Level 6 heading

Level 1 usage is not recommended. Use level 2 for slide titles. Use level 3 and below for other titles.

Text scaling classes

[Largest text]{.largest}
[Larger text]{.larger}
[Large text]{.large}
Normal text.  
[Small text]{.small}
[Smaller text]{.smaller}
[Smallest text]{.smallest}

Largest text
Larger text
Large text
Normal text
Small text
Smaller text
Smallest text

Text Formatting

Horizontal alignment of text can be adjusted as shown below.

[Left aligned text]{.left}
[Center aligned text]{.center}
[Right aligned text]{.right}

Left aligned text
Center aligned text
Right aligned text

::: {.blockquote}
This line is quoted
:::

This line is quoted

A horizontal line can be created using ---

This is **Bold text** This is Bold text

This is *Italic text* This is Italic text

~~Strikethrough~~ text ~~Strikethrough~~ text

This is subscript H~2~O H₂O

This is superscript 2^10 2¹⁰

This is a [badge]{.badge .badge-primary}
This is a badge

This is a [badge]{.badge .badge-secondary}
This is a badge

This is a [link](r-project.org) This is a link

Text formatting

Fit text to full width.

::: {.r-fit-text}
Attention
:::

Attention

Text formatting

In reports, .aside pushes content into the margin while in revealjs, it is pushed to the bottom.

::: {.aside}
Content inside aside.
:::

Lists

Unordered List

- Bullet 1
- Bullet 2
  - Sub-bullet 2.1

Bullet 1
Bullet 2
- Sub-bullet 2.1

Incremental List

:::{.incremental}
1. Incremental Bullet 1
2. Incremental Bullet 2
3. Incremental Bullet 3
:::

Incremental Bullet 1
Incremental Bullet 2
Incremental Bullet 3

For more options, see here.

Custom CSS styling

You can style text using any custom CSS
This is a block level element

::: {style="color: red"}
This paragraph is red.
:::

This paragraph is red.

This is a span. ie; A word or one line.

[This text is blue]{style="color: blue"}

This text is blue

Callouts

::: {.callout-note}
This is a callout.
:::

::: {.callout-warning}
This is a callout.
:::

::: {.callout-important}
This is a callout.
:::

::: {.callout-tip}
This is a callout.
:::

::: {.callout-caution}
This is a callout.
:::

Note

This is a callout.

Warning

This is a callout.

Important

This is a callout.

Tip

This is a callout.

Caution

This is a callout.

Callouts

Variants of callout

::: {.callout-note icon=false}
Icon is disabled
:::

::: {.callout-note appearance="simple"}
Appearance is simple
:::

::: {.callout-note appearance="minimal"}
Appearance is minimal
:::

::: {.callout-note appearance="simple"}
## Custom title
Simple appearance and a custom title
:::

::: {.callout-note appearance="minimal"}
## Custom title
Minimal appearance and a custom title
:::

Note

Icon is disabled

Appearance is simple

Appearance is minimal

Custom title

Simple appearance and a custom title

Custom title

Minimal appearance and a custom title

Callouts

::: {.callout-note}

This contains code

## Callout with code

```
Sys.Date()
```

:::

Callout with code

This contains code

Sys.Date()

Code formatting

Inline code

Code can be defined inline where `this` looks like this.
R code can be executed inline `r "\u0060r Sys.Date()\u0060"` producing r Sys.Date().

== != && ++ |> <> <- <= <~ /= |=> ->>

Code formatting

Code chunks

Code can also be defined inside chunks.

```
This is code
```

This is code

R code is executed inside code blocks like this

```{r}
Sys.Date()
```

The code and results can be hidden by

```{r}
#| echo: false
#| results: hide
data(iris)
```

These are called chunk attributes. For more options, see here and complete list here.

Images • Markdown

Using Markdown

Using regular markdown.

![](assets/image.webp)

The dimensions are based on image and/or fill up the entire width.

Control image dimensions.

![](assets/image.webp){width=50%}
![](assets/image.webp){width=20%}

For more image documentation, see here.

Images • Markdown • Layout

Figure layout

::: {layout-ncol=3}
![Caption for figure 1](assets/image.webp){#fig-layout-1}

![Caption for figure 2](assets/image.webp){#fig-layout-2}

![Caption for figure 3](assets/image.webp){#fig-layout-3}
:::

Images • Markdown • Layout

Absolute positioning

![](assets/image.webp){.absolute top=250 left=0 height="450"}
![](assets/image.webp){.absolute top=200 right=50 height="250"}
![](assets/image.webp){.absolute bottom=0 right=200 height="200"}

Images • HTML

Using Raw HTML

This image is 30% size. <img src="assets/image.webp" style="width:30%;"/>

Math expressions

Some examples of rendering equations.

$e^{i\pi} + 1 = 0$

$$\frac{E \times X^2 \prod I}{2+7} = 432$$

$$\sum_{i=1}^n X_i$$

$$\int_0^{2\pi} \sin x~dx$$

$e^{i\pi} + 1 = 0$ \[\frac{E \times X^2 \prod I}{2+7} = 432\] \[\sum_{i=1}^n X_i\] \[\int_0^{2\pi} \sin x~dx\]

Math expressions

Some examples of rendering equations.

$\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$

$\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$

$\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$

$\left( \sum_{i=1}^{n}{i} \right)^2 = \left( \frac{n(n-1)}{2}\right)^2 = \frac{n^2(n-1)^2}{4}$

$\begin{eqnarray} X & \sim & \mathrm{N}(0,1)\\ Y & \sim & \chi^2_{n-p}\\ R & \equiv & X/Y \sim t_{n-p} \end{eqnarray}$

$\begin{eqnarray} P(|X-\mu| > k) & = & P(|X-\mu|^2 > k^2)\\ & \leq & \frac{\mathbb{E}\left[|X-\mu|^2\right]}{k^2}\\ & \leq & \frac{\mathrm{Var}[X]}{k^2} \end{eqnarray}$

Diagrams

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

Colourful

This slide has a colourful background

##  Colourful {background-color="#ABEBC6"}

Big Image

This slide has a background image

##  Big Image {background-image="assets/image.webp"}

General tips

To set custom title slide cover image

title-slide-attributes:
  data-background-image: "assets/images/cover.webp"

To add custom end slide picture, set page title

## {background-image="assets/images/cover.webp"}

Add custom css under YAML css: "styles.css"

Thank you!

Questions?

2025 • SciLifeLab • NBIS • RaukR