Hypopo

Creating presentations with Quarto!

Ruben C. Kubina

What is Quarto

“Quarto is an open-source scientific and technical publishing system.”

Create presentations, websites, blogs, reports and more!
- reproducible and the option for automatically generating
Include your or Python code for plots or tables
Share interactive content with your coworkers (or the world!)
- Publish with GitHub Pages or other services

Creating a HTML presentation

Why a HTML presentation and not just PowerPoint?

Makes it easy to share: only a link to send!
Easy integration of code snippets and plots
Viewable on any operating system with an internet browser

Get started

Quarto should be already installed in R-Studio.
If not or if you want to use VS Code, Jupyter or Text Editor download the newest version from the official website.

\(\rightarrow\) I will focus on R-Studio

Create a new document

In R-Studio:

Check Reveal JS for HTML output

Structure of a `.qmd` file

Preamble defines format and other options for the output:

---
title: "Hypopo"
author: "Ruben C. Kubina"
format: revealjs
---

---
title: "Hypopo"
author: "Ruben C. Kubina"
format: revealjs
---

---
title: "Hypopo"
subtitle: "Creating presentations with Quarto!"
author: "Ruben C. Kubina"
format: 
  revealjs:
    logo: images/Logo-INRAE_Transparent.png
    footer: "Ruben C. Kubina - 11.07.2024"
    slide-number: true
---

Filling the presentation

## Title of slide 1

Content of slide 1 

## Title of slide 2

Content of slide 2

## indicates the begin of a new slide
Text/content between two slides is displayed

*, - or + can be used to create lists

* Element 1 of list
  + sub-item
    - a sub-sub-item?

Element 1 of list
- sub-item
  - a sub-sub-item?

Including images

![Logo of INRAE](images/Logo-INRAE_Transparent.png)

Logo of INRAE

![](images/Logo-INRAE_Transparent.png){fig-align="right" width=20%}

Caption in [], relative path to figure in () and parameters in {} like width, height and more…

Including figures from R code

Code needs to be embedded in chunks

```{r}
library(ggplot2)
x <- 1:10
y <- cos(x)

ggplot() +
  geom_line(aes(x = x, y = y))  
```

Control code chunks

Use cell options to control code output, figures, tables,…

```{r}
#| echo: false
#| fig-cap: "Figure caption"
#| fig-align: "center"
#| out-height: "20cm"

# Put your code here
```

#| echo: false: Include cell source code in rendered output
#| fig-cap: caption of figure
#| fig-align: alignment of figure
#| out-height: output height of figure

And many more options…

Save and read a plot as RDS

Save your plots created in your R scripts as RDS-files and read them directly in the Quarto presentation!

saveRDS(yourPlot, file = "yourPath/yourPlot.RDS")

readRDS(file = "yourPath/yourPlot.RDS")

Example for a plot created during my internship:

readRDS(file = "images/map_initKGE_Loire.RDS")

Creating columns

::::{.columns}

:::{.column width="60%"}
  *Content* of left column 
  <!-- 60% width of the slide -->
:::

:::{.column width="40%"}
  **Content** of right column 
  <!-- 40% width of the slide -->
:::

::::

:::: indicate div container with class .columns
*Content* is italic font and **Content** is bold font

Content of left column

Content of right column

Render presentation

Render presentation directly in R-Studio
or run quarto render index.qmd in the command line

Output: index.html and index_files \(\rightarrow\) the presentation

Render presentation

The output of your presentation should be named index.html
If you want to name your Quarto file different, set the name of the output file in the preamble:

---
title: "Hypopo"
author: "Ruben C. Kubina"
format: 
  revealjs:
    output-file: index.html
---

Styling a Quarto document

Built-in themes

Quarto includes 11 built-in themes: e.g. beige, dark or moon…

The theme can be selected in the preambel:

---
title: "Hypopo"
format:
  revealjs: 
    theme: dark
---

Custom themes

Create your own custom theme with scss and/or css rules!

---
title: "Hypopo"
format:
  revealjs: 
    theme: theme.scss
---

./theme.scss

/*-- scss:defaults --*/
// fonts
$font-family-sans-serif: "AvenirNextLTPro-Regular", "Avenir Next LT Pro";
// headings
$presentation-heading-font: "AvenirNextLTPro-Regular", "Avenir Next LT Pro";
$presentation-heading-color: #00a3a6 !default;

Publish a Quarto presentation

GitHub Pages

Offers free hosting of static websites
Easy to work together on projects/presentations
Public repository needed if you do not have a premium account: attention with confidential data, api keys…
GitHub Actions gives possibility to render Quarto documents automatically after e.g. every commit

There are many other alternatives available!