Quarto Course

Thomas Förster

19.09.2025

About quarto

Quarto is a pandoc wrapper+. It does help with all the extra stuff which is not provided in pandoc and gives you the possibly to create plugins and templates more intuitive.

Installation Process

Download a standalone package from:

[!info] Download https://quarto.org/docs/get-started/

In more detail:

  • Check out the latest release on https://github.com/quarto-dev/quarto-cli/releases/
$> cd ~/opt
$> wget https://github.com/quarto-dev/quarto-cli/releases/download/v1.8.24/quarto-1.8.24-linux-amd64.tar.gz
$> tar -xvzf quarto-...
$> ln -s ~/opt/quarto.../ ~/bin/quarto
$> quarto check

Getting Started With revealjs

  • First step create a file index.qmd
---
format: revealjs
---

and run the following in another shell.

quarto preview index.md --port 8000
  • Let’s fill the presentation with life
---
format: revealjs
---

# Head A

## Slide A1
  • A bit more configuration and meta information
---
title: My Presentation
author: Thomas
date: today
date-format: DD.MM.YYYY
format: revealjs
html-math-method:
  method: mathjax
  url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"      
footer: My Presentation 
---

Lists and Math

- Point A
- Point B $\frac{d}{dx} \frac 12 x^2 $

$$ E = m\cdotc^2 $$
  • Point A
  • Point B \(\frac{d}{dx} \frac 12 x^2\)

\[ E = m\cdot c^2 \]

Images

  • Base ![My Caption](./images/drawing.svg)

My Caption

Video

{{< video https://www.youtube.com/embed/wo9vZccmqwc 
  title="What is the CERN"
  aspect-ratio="16x9"
  width="800"
>}}

Columns

:::::: columns
::: column
50% Box 1
:::
::: column
50% Box 2
:::
::::::

50% Box 1

50% Box 2

Chalkboard

Update the configuration

---
title: My Presentation
author: Thomas
date: today
date-format: DD.MM.YYYY
format: 
  revealjs:
    chalkboard: 
      theme: whiteboard
html-math-method:
  method: mathjax
  url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"      
footer: My Presentation | Datenspuren 2025
---
  • c toggles the note taking on your slides
  • b toggles board
  • d download drawings (notes)

Speaker Notes

::: notes
- Note 1 
- Note 2
:::
  • s toggles the speaker view

Further revealjs Features

  • f toggles full screen
  • o and ESC toggles slide overview
  • e toggles pdf export mode
  • r toggles scroll view mode
  • ? keyboard help

Boxes/Callouts

Note that there are five callout NAMEs available: - note - warning - important - tip - caution

::: callout-NAME
{contents}
:::

Note

A note

Caution

Caution

Code

``` python
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```
#| echo: false
#| fig-cap: "A polar axis plot"
#| output-location: column

A polar axis plot

Div Environments

::: NAME
:::

Translate to:

<div class=NAME>
content
</div>
::: {.NAME style="..."}
:::

Translate to:

<div class=NAME style="...">
content
</div>

Example: Center and middle image

::: {style="display: flex; justify-content: center; align-items: center; text-align: center; height: 100%"}
![](./images/drawing.svg)
:::

Example: Setting up your columns

:::::: columns
::: {.column style="width: 28%; background-color: lightblue;"}
28% Box 1
:::
::: {.column width="4%"}
:::
::: {.column style="width:68%; font-weight: bold; text-align: center; background-color: lightgreen;"}
68% Box 2
:::
::::::

28% Box 1

68% Box 2

  • Center image

    ![](./images/test.svg){fig-align="center"}

  • Slide behavior

    ## Slide {.center}

Extensions

How to store your styling more convenient.

You can create your own extension and use extension.

Use extension

quarto install extension tfoerst3r/quarto-revealjs-hub

Add it to an existing project

quarto add tfoerst3r/quarto-revealjs-hub

Create your own extension

quarto create extension

Getting started with LaTeX Documents

quarto install extension tfoerst3r/quarto-latex-letter

The END