Presentations

Workshop: Intro to Quarto
posit::conf 2024

Anatomy of a Document

Presentations, like any Quarto document,

  1. YAML format: revealjs
  2. Markdown
  3. Code cells

Our Turn

This slide deck is in desperate need of some help. Let’s…

  1. Add some organization
  2. Reveal on click
  3. Split content into columns
  4. Deal with code more deftly
  5. Add logo and footer
  6. Enable slide annotation

Your Turn

Pick up where we left off and modify then YAML to…

  1. Change the transition style between slides
  2. Change the slide size
  3. Add slide numbers
  4. Experiment with different slide background options
10:00

Our Turn

This slide deck is in desperate need of some help. Let’s…

  1. Add a timer
  2. Print to PDF
  3. Prepare to present
  4. Add a theme

SCSS

/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", serif !default;

// colors
$body-bg: #f0f1eb !default;

// headings
$presentation-heading-font: "Palatino Linotype", serif !default;
$presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

blockquote {
  margin-left: 80px !important;
}

Your Turn

It’s time to make this presentation really shine. Use SASS variables to

  1. Select a new theme to use.
  2. Personalize your theme by copy-and-pasting the example in the docs into a custom.scss file then…
    1. Changing the background color
    2. Changing the font size.
07:00

Any other questions?

Appendix

Add some organization

  1. Add title slides by starting a slide with # instead of ## (docs).
  2. Press “o” to see slide overview (docs).

Return to Our Turn

Reveal on click

  1. Add . . . on a new line to introduce a break in the slide that you can click to advance.
  2. Can add the .fragment class to any div or span to reveal on click (docs).
  3. Add .incremental class to a div outside a list to incrementally reveal list items (docs).
  4. Can set incremental: true option in yaml under format: revealjs.
  5. Can create an exception using .nonincremental class on a div.

Return to Our Turn

Split content into columns

Nest .column divs inside a .columns div and specify their width (docs)

:::{.columns}

:::{.column width="50%"}
Here is the stuff on the left.
:::

:::{.column width="50%"}
Here is the stuff on the right.
:::

:::

Return to Our Turn

Deal with code more deftly

  1. Naive way: put a code cell in left column with eval: false and a copy of it in the right column with echo: false.

  2. Instead, try putting both of those code cells in a div with .panel-tabset. Precede each cell block with a level 2 header to serve as the label for each tab.

  3. Better yet: remove the tabset and the columns. Add the code cell option.

    ```{r}
#| output-location: column-fragment
```

    This will put it in the right column and appear after a click. Read the docs for other good options (docs)

Return to Our Turn

Intro to Quarto