Quarto 5: Presentations
Quarto can also be used to create presentations in multiple formats
such as reveal.js
(HTML), beamer
(PDF) and
pptx
(PowerPoint) - the most powerful of these formats by
far is the first one. Creating presentations with Quarto is quite
similar to creating general Quarto documents, with some added features
to keep in mind.
Slides
The first thing that’s needed for creating a presentation is deciding what constitutes a slide. The default is that slides are delimited by a document’s header levels.
- Render your document using the
--to revealjs
flag and open it.
You should now have the same document we’ve been working on for this
tutorial in presentation format! You can step through the slides using
the arrow keys, press F
to go into full-screen mode,
S
to view speaker notes, M
for the menu (you
can also click in the lower left corner to get this menu) and
ESC
to go back.
If you’ve followed along you should have one level-1 header
(#
) and two level-2 headers (##
). Notice that
the level-1 header here will render as a blank page with just the header
content on it, while the level-2 headers will render as normal slide
headers. This all looks quite nice, and we didn’t even have to change a
thing! Disregard that the table on the last slide doesn’t fit for now,
we’ll get back to it later. Another method of delimiting slides is using
a horizontal rule, ---
, which allows you more fine-grained
control over slides and their content (and is especially useful if you
want to have a slide without a title).
Divisions
There are many ways you can add presentation-specific content to your slides, some of which you’d recognise from e.g. PowerPoint functionality.
So called “divisions” or “divs” allow you to control the appearance of content in your slides.
Let’s fix that issue with the table that was larger than the page.
The problem here is one of content overflow, which can be fixed
by adding a special {.smaller}
div.
Note
Divs do not work for level1 headings (starting with a single#
).
- Add the
{.smaller}
div to the table header (it should read something like## A table {.smaller}
) and render.
That should have automatically re-sized the table to fit into the slide. Another way to solve this is to make slide content scrollable.
- Change the
{.smaller}
div to a{.scrollable}
div and render.
Instead of re-sizing the table we now get the ability to scroll down it instead; whichever solution you prefer is up to you.
Adding divisions of various types like this is a common thing for Quarto presentations. Another common presentation-functionality is incremental lists, which can also be achieved with divisions. When adding a division to slide content we specify the division’s content in a manner similar to a code chunk, like in the following example:
## Penguin species
::: {.incremental}
- Adelie
- Chinstrap
- Gentoo
:::
- Add the code above to your document and render it.
Stepping through incremental content works the same as for stepping through slides, i.e. using the arrow keys.
- Render your document to
html
instead ofrevealjs
.
Notice that Quarto rendered the HTML document just fine, even though you now have some presentation-specific code? This allows you to switch between the formats on-demand without having much overhead or format-specific code, which is great when you want to present your work without having to whip out a full-fledged presentation and all the work that goes into that!
There are other useful divisions as well, including
{.notes}
(speaker notes), {.aside}
(additional
commentary similar to footnotes), {.footer}
(slide
footers), which you can add in the same way as we did for the
incremental list above.
- Pick one of the above-mentioned divisions to add to your presentation and render it.
Note
The notes and footer divisions will appear as normal Markdown text when rendering to HTML, while asides will appear in the margin. These divisions thus represent cases you might want to avoid if you want to be completely format-agnostic.
Presentation options
Just like the other formats you can specify presentation-specific
options at the document-level using the YAML header. You could, for
example, add the {.scrollable}
or {.smaller}
div to the entire document.
- Add the
revealjs
format to the YAML header as well as ascrollable: true
option to it.
You can also specify one of the built-in themes here.
- Add
theme: simple
to your YAML header and render.
You can find the entire list of themes at the Quarto website Links to an external site..
Multiple columns
Sometimes you’ll want to have more than one column in your
presentation, which is done with the {.columns}
and
{.column}
divisions. The former specifies that a section
with multiple columns is starting, while the second specifies when each
column starts, like so:
:::: {.columns}
::: {.column}
Left column
:::
::: {.column}
Right column
:::
::::
- Add multiple columns with some content to your presentation and render it.
You can also control the widths of these columns using e.g.
{.column width="40%"}
.
Note
The{.columns}
div also works for a normal HTML render, so it’ll look the same regardless of whether you output as a document or a presentation.
Fragments
We’ve already learnt how to get incremental lists working, but what
about general content we want to incrementally step through? This is
done with the {.fragment}
div.
- Add a
{.fragment}
div to some slide content and render.
Fragments are similar to “animations” from PowerPoint and come with
lots of built-in variations, e.g. fade-out
,
grow
, strike
and several
others
Links to an external site..
- Add a fragment variant to your content, e.g.
{.fragment .grow}
and render your document.
You can also control the order in which fragments appear using the
fragment-index=<NUMBER>
option.
- Create a new slide and add some content with a different order of appearance than the order of the code. If you need help or inspiration, click below.
Click to show
## Why Palmer Penguins?
::: {.fragment fragment-index=2}
{fig-align="center"}
:::
::: {.fragment fragment-index=1}
The goal of `palmerpenguins` is to provide a good dataset for data exploration
and visualization, as an alternative to `iris.`
:::
Quick recap
In this section we covered how to create presentations using Quarto, including how to add various divisions, global slide-options, multiple columns and fragments.