Quarto

Abstrave quarto theme

Roy Francis

05-Sep-2026

Introduction

This is a Quarto Reveal.js presentation. This demo showcases general authoring and presentation capabilities. Reveal.js in Quarto is documented here.

Press to enable the pointer and press again to hide it.

Getting started

Add YAML front matter to the top of a .qmd file.

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

Render it from a terminal:

quarto render slide.qmd

Slides

Slide separators

Slides are separated by ##. They can be with or without a title. Slides can be hidden or not counted in slide numbering.

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

Slide notes

Content inside .notes is visible only in presenter mode. Press to enable presenter mode.

Keyboard shortcuts

  • Press for help.

Incremental content

Incremental content is separated by . . . (three dots with spaces) like seen now

More control is possible with the .incremental class and .fragment class.

::: {.incremental}
- Incremental item 1
- Incremental item 2
:::
  • Incremental item 1
  • Incremental item 2
:::
::: {.fragment}
Content A
:::
::: {.fragment}
Content B
:::

Content A

Content B

Layout content

The slide content can be organized into nested columns.

:::{.columns}
:::{.column width="50%"}

::: {style="background-color:#fdebd0"}
Left content
:::

:::
:::{.column width="50%"}

::: {style="background-color:#eaf2f8"}
Right content
:::

:::
:::

Left content

Right content

Text vertical alignment

::: {.v-top}
Top-aligned content
:::
::: {.v-center}
Centered content
:::
::: {.v-bottom}
Bottom-aligned content
:::

Text horizontal alignment

[Left aligned text]{.left}
Left aligned text

[Center aligned text]{.center}
Center aligned text

[Right aligned text]{.right}
Right aligned text

Text alignment vertical horizontal center

::: {.v-center .center}
Centered content
:::

Centered content

Panel tabs

Content for Tab A.

Content for Tab B.

Text formatting

ABCDEFGHIJKLMNOPQRSTUYWXYZÅÄÖ

abcdefghijklmnopqrstuvwxyzåäö

0123456789

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

This is **bold** produces bold text

This is *italic* produces italic text

~~Strikethrough~~ produces strikethrough text

This is subscript H~2~O H2O and superscript 2^10^ 210

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

This line is quoted.

[Largest text]{.largest}
[Large text]{.large}
Normal text
[Small text]{.small}
[Smallest text]{.smallest}

Largest text
Large text
Normal text
Small text
Smallest text

This is a [link](https://example.com/) This is a link

Buttons and badges

[button]{.btn} button

[button]{.btn .btn-primary} button

[button]{.btn .btn-secondary} button

[button]{.btn .btn-tertiary} button

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

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

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

Fit and aside text

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

Attention

Lists

- Bullet 1
- Bullet 2
  - Sub-bullet 2.1
  • Bullet 1
  • Bullet 2
    • Sub-bullet 2.1
:::{.incremental}
- Bullet 1
- Bullet 2
  - Sub-bullet 2.1
:::
  • Bullet 1
  • Bullet 2
    • Sub-bullet 2.1
1. Incremental item 1
2. Incremental item 2
  1. Incremental item 1
  2. Incremental item 2
  3. Incremental item 3
:::{.incremental}
1. Incremental item 1
2. Incremental item 2
:::
  1. Incremental item 1
  2. Incremental item 2
  3. Incremental item 3

Custom CSS styling

  • You can style text using any custom CSS
  • This is block styling.
::: {style="color: red"}
This paragraph is red.
:::

This paragraph is red.

  • This is inline styling.

[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

Accordions

Accordion support is provided through the accordion extension.

Accordion contents can be defined in the YAML header as shown below.

accordion:
  - ac-1:
    - header: "**This is a header**"
      body: "This is **bold** and *italic* text"

and then called in the body using the shortcode.

{{< accordion ac-1 >}}
This is bold and italic text

Inline Accordions

An accordion can also be defined inline as shown below.

{{< accordion label="my-accordion" header="Click to expand" body="This is the content of the accordion." >}}
This is the content of the accordion.

Multiple inline items are defined using JSON.

{{< accordion label="inline-multi" items='[
  { "header": "Inline Item 1", "body": "Content for inline item 1." },
  { "header": "Inline Item 2", "body": "Content for inline item 2." }
]' >}}
Content for inline item 1.
Content for inline item 2.

Code formatting

Inline code can be written with backticks: `this` looks like this.

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

Code blocks do not need to execute to be syntax highlighted.

```python
message = "This is code"
print(message)
```
message = "This is code"
print(message)

Code sizing

Sizing pre-formatted inline code

[`Sys.Date()`]{.largest}
[`Sys.Date()`]{.larger}
[`Sys.Date()`]{.large}
`Sys.Date()`
[`Sys.Date()`]{.small}
[`Sys.Date()`]{.smaller}
[`Sys.Date()`]{.smallest}

Sys.Date()
Sys.Date()
Sys.Date()
Sys.Date()
Sys.Date()
Sys.Date()
Sys.Date()

Sizing pre-formatted code block

::: {.small}
```
Sys.Date()
```
:::
Sys.Date()
::: {.smaller}
```
Sys.Date()
```
:::
Sys.Date()
Sys.Date()

Code highlighting

```{r}
#| eval: false
#| echo: true
#| code-line-numbers: "2-3"

iris |>
  ggplot(aes(x=Sepal.Length,y=Sepal.Width,col=Species))+
  geom_point(size=2)+
  labs(x="Sepal Length",y="Sepal Width")+
  theme_report()
```
iris |>
  ggplot(aes(x=Sepal.Length,y=Sepal.Width,col=Species))+
  geom_point(size=2)+
  labs(x="Sepal Length",y="Sepal Width")+
  theme_report()
```{r}
#| eval: false
#| echo: true
#| code-line-numbers: "2|3|5"

iris |>
  ggplot(aes(x=Sepal.Length,y=Sepal.Width,col=Species))+
  geom_point(size=2)+
  labs(x="Sepal Length",y="Sepal Width")+
  theme_report()
```
iris |>
  ggplot(aes(x=Sepal.Length,y=Sepal.Width,col=Species))+
  geom_point(size=2)+
  labs(x="Sepal Length",y="Sepal Width")+
  theme_report()

For more code highlighting documentation, see here.

Table

Simple markdown table

|Item|Category|Cost|
|---|:---:|---:|
|Apple|Food|$10|
|Bus|Transport|$15|
Item Category Cost
Apple Food $10
Bus Transport $15

Images • Markdown

![](assets/image.webp)

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

Images • Markdown 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}
:::
Figure 1: Caption for figure 1
Figure 2: Caption for figure 2
Figure 3: Caption for figure 3

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

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

Stacking

::: {.r-stack}
::: {.fragment}
![](assets/image.webp)
:::
::: {.fragment}
![](assets/image.webp)
:::
:::

Stretching

Stretch images to use up remaining space

![](assets/image.webp){.stretch}

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

\(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}\)

Interactive maps - Leaflet

The leaflet extension uses document metadata and a shortcode to create maps.

{{< leaflet ucl >}}

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

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

This slide has a colourful background.

Big image

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

This slide has a background image.

Cover slide

Change title slide background image by adjusting the following YAML parameters.

---
title-slide-attributes:
  data-background-image: "assets/image.webp"
  data-background-size: "cover"
  data-background-opacity: "1"
---

General tips

Thank you!

Questions?

2026 • Specky