quarto presentation logo

05 - Presentations

Making slides with code, tom mock | 2022-07-25, quarto presentation formats.

• revealjs - essentially the replacement for xaringan , but with Pandoc-native syntax
• beamer for LaTex slides
• Powerpoint for when you have to collaborate via Office

reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

revealjs for Quarto is a framework for turning Pandoc-friendly markdown + code into beautiful slides

User guide: https://quarto.org/docs/presentations/revealjs/

Core workflow

• Open materials/workshop/05-presentations/revealjs-penguins.qmd
• Explore the code
• Add a new slide with a level 2 header and some text

YAML for these slides

Transitions, slide numbering, presentation preview.

• In the latest version of RStudio, Quarto revealjs presentations will open up as a “background job” in the Presentation tab.

• Using RStudio, create a new revealjs Quarto presentation
• author for your name
• titled “My first Quarto Presentation!”
• Add slide numbering (what do the different types mean?)
• Write out what you did this morning (woke up, ate breakfast, walked to this room, etc) in sub-sections
• New sections should have level 2 headers
• Add a code chunk
• Link out to an image with markdown syntax

revealjs vs xaringan

• xaringan for RMarkdown uses only knitr and remark.js , without Pandoc and with some Pandoc-incompatabilities
• revealjs was a lesser known RMarkdown package, but is the primary HTML slide generator for Quarto

If you loved xaringan , you’ll love revealjs !

Presentation Visual Editor

Unlike xaringan , Quarto + revealjs can be edited with the RStudio Visual Editor!

Separate slides

Level 2 header = new slide

Level 1 header = new slide and new section

• --- can also delineate slides via horizontal rules or leave the heading “blank” for untitled slides

Reminder about pandoc div and spans

• Create lists with - or * or 1.

Incrementally reveal elements with:

Or affect globally:

Or turn it off for specific lists

Incremental lists

• Second item

Incremental reveal

Not limited to just bullet points…

Use . . . syntax to indicate a break at an arbitrary location

You can also make a point with fragments

Highlight red

Fade in, then out

Slide up while fading in

Fragments, nesting

Fragments can be nested to affect the same “text” multiple times

Fade in > Turn red > Semi fade out

Fragments, spans

This is an important sentence!

Mind the gap when riding the rail!

Fragments, order

Appears last

Appears first

Appears second

• Open materials/workshop/05-presentation/fragments.qmd
• Make the portions appear in order: top -> bottom and left -> right

Column layout

On the left

On the right

Output location, column-fragment

Output location, column

Output location, fragment

Output location, slide

Column Layout, arbitrary fragment

If you try . . . syntax WITH ::: {.columns} - it won’t be incremental… BUT:

These appear first

You can nest .incremental + .fragment to get your expected behavior.

• Create a new presentation with RStudio> New Quarto Presentation
• Create two columns with the ::: {.columns} and use .fragment tags on the columns for incremental reveal of those columns

Stack layout

Incremental reveal of images/content

Fit Text {.r-fit-text}

Stretch images {.r-stretch}.

Fit to the remaining space - this is the default behavior in revealjs

Title Slide, YAML edition

Title slide, diy, logo and footer.

A footer can also be set by slide with:

https://themockup.blog

Slide alignment

• Heading level one will be center-aligned
• Heading level two will be left-aligned

Right aligned!

• Some bullets
• Another bullet

Slide backgrounds, color

Slide backgrounds, images.

Note, you may need to set a background-color to black/white to “force” the text to contrast.

Footnotes in presentations are placed at the bottom of the slide and numbered.

For example, did you know that Howard is a dog 1 ?

He also likes to sleep 2

Asides are like footnotes, but don’t have numbers 1 .

• Create a new revealjs presentation
• Aside/footnote
• Tabset with code and output (two options on how!)
• Code highlighting walking through at least two lines
• A slide with an image as the background

Code line-highlighting

Use #| code-line-numbers: "3" syntax - will highlight line and fade other lines

Sometimes you want to make a point though…

And I often want to “walk through” a set of code!

Themes/Appearance

https://quarto.org/docs/presentations/revealjs/themes.html

Arbitrary HTML + Position absolute

Position = absolute, position = .absolute.

Position .absolute

Auto-animate.

Automatically animate matching elements across slides with Auto-Animate.

Get started with Quarto