Background

One of the great features of R Markdown is using it to create presentations. Most of the resulting outputs are .html documents, but there are options to produce .pptx or pdf versions as well. One of the advantages of using one of these options is that you can easily include R code block and their output in the slides themselves without the need to copy and paste the information from elsewhere. Another is that you can add nicely formatted equations using the same LaTeX commands we saw when publishing documents to PDF formats. Although the basic options for slide formatting are somewhat limited, you can expand upon them by using Cascading Style Sheets (CSS), and there is a growing array of choices from developers available online.

Rationale

Some people are turned off by the notion of creating presentations by writing a mix of codes and text rather than point-and-click-and-drag-and-etc. I would encourage those folks to consider the following with respect to openness and accessibility.

Not everyone can afford or has ready access to proprietary software. Creating presentations in .html format means anyone with a web browser can view them.
Nearly everyone writes code to produce the figures they ultimately include on slides—why not combine those tasks into one?

Default options

RStudio has several forms of presentation documents available with the default options. These are

ioslides: HTML presentation viewable in any web browser; slides can be printed to PDF (this is the format that Mark uses for some of the lecture material);
Slidy: HTML presentation viewable in any web browser; slides can be printed to PDF;
Beamer: Older form of PDF output that requires an installation of (La)TeX;
Powerpoint: Slimmed down Powerpoint presentation.

Note: There are several other formats available via other packages (eg, Mark uses Xaringan).

Tip: To create a presentation in RStudio using one of the four basic options, from the main menu select File > New File > R Markdown… and then click on the Presentation tab on the left side.

Task: In the dialogue box, enter a title for your presentation and your name (you can also change these later). Choose the presentation format you’d like and click OK.

ioslides

Both of the default HTML formats generally use the same options for slide layouts and styling. Here are some of the options for a basic ioslides presentation, which is what Mark uses for slide decks in class.

Title slide

The content on the title slide will be drawn from the YAML in the .Rmd file. For example, this YAML

---
title: "My very first presentation using ioslides"
subtitle: "FISH 549"
author: "First Last"
date: "15 February 2023"
output: ioslides_presentation
---

will result in this title page:

Tip: You can include line breaks in any of the elements on the title slide by inserting the HTML code <br> between words or phrases.

For example, this YAML

---
title: "My very first presentation using ioslides"
subtitle: "FISH 549"
author: "First Last<br>School of Aquatic and Fishery Sciences<br>University of Washington"
date: "15 February 2023"
output: ioslides_presentation
---

will result in this title page:

Section breaks

You can specify major sections in an ioslides presentation with a single hastag #. For example, this code

# Introduction

will result in a slide with this section break:

Normal slide

Regular slides are given a title with 2 hashtags ## and an optional subtitle with a pipe | following the title. You can then use regular Markdown constructs for things like (un)ordered lists. Indenting text with 4 or more spaces will create a sublist.

For example, the following code

## R Markdown | Worship

- Such an amazing tool  
- The possibilities seem endless

    1) publishing  
    2) presentations  
    3) Shiny apps  
    4) websites

will result in this slide layout

Incremental bullets

You can have your bullet points appear incrementally with 3 different options.

If you want all of the slides in your presentation to build incrementally, then change the YAML to this:

output:
  ioslides_presentation:
    incremental: true

If you prefer that only some of the slides build incrementally, then you can either

include the option {.build} after the title of your slide, or

## Slide title {.build}

* Something here

* Another point to make

precede an asterisk/bullet with the > symbol (the same one we use for blockquotes).

## Slide title

> * Something here

> * Another point to make

No slide title

You can omit the title on a slide by using three dashes --- to demark the slide’s beginning.

For example, this code

---

Some content without a title

will result in this slide layout

Adding code blocks

You can include an R code block just as you would in a normal Markdown document. For example, this code

## Adding code

```{r simple_code, echo = TRUE}
a <- 1
b <- 2
a / b
```

will result in this slide layout

You can hide the code itself and only show the result with the chunk option echo = FALSE.

## Adding hidden code

```{r simple_code_2, echo = FALSE}
a <- 1
b <- 2
a / b
```

will result in this slide layout

You can show code, but not evaluate it with the chunk option eval = FALSE.

## Adding code that doesn't evaluate

```{r simple_code_3, echo = TRUE, eval = FALSE}
a <- 1
b <- 2
a / b
```

will result in this slide layout

You can highlight certain lines of code by bracketing it with 3 hashtags ### and the HTML codes for bold <b> </b>. For example,

## Highlighting code

The third line of code appears in bold

Press `h` to make the non-bold lines fade away

```{r simple_code_4, echo = TRUE, eval = FALSE}
a <- 1
b <- 2
### <b>
a / b
### </b>
```

will result in this slide layout

and when you press h you get this

Code for plotting

You can also include R plots in your slides with any of the various plotting commands. For example, this code will add a simple scatterplot with a caption.

## Adding plots

```{r plot_cars, fig.cap = "A simple scatterplot", echo = FALSE}
plot(cars)
```

By default, plots are left aligned on the slide. You can center them, and resize them with some additional options in the code block. For example, this code will center the figure and make it 3” tall by 5” wide.

## Adding plots

```{r plot_cars_2, fig.cap = "A simple scatterplot", echo = FALSE, fig.align = "center", fig.height = 3, fig.width = 5}
plot(cars)
```

Adding equations

You can add LaTeX equations to slides in one of two ways: standalone or inline. Standalone equations are denoted with double dollar signs ($$) on separate lines and inline equations are denoted by single dollar signs ($) on each side of the equation. For example, the following code

## Adding equations

A standalone equation

$$
y_i = \alpha + \beta x_i + \epsilon_i
$$

An inline equation where $\epsilon_i \sim \text{N}(0, \sigma^2)$

would create this slide

Background image

You can include a background image on a slide using data-background and other possible attributes including data-background-size and data-background-position. For example, this code will create an untitled slide with an image that covers the entire slide. (Note the this image is in a folder called img located inside the folder/directory where the .Rmd file is located.)

## {data-background=img/rmarkdown.png data-background-size=cover}

The following code will create a titled slide with a background image that is

50% the size of the original
left-aligned
in the middle of the slide from top to bottom

## A smaller, off-centered image {data-background=img/rmarkdown.png data-background-size="50%" data-background-position="0% 50%"}

Visual appearance

You can display the presentation using a wider form with the widescreen option in the YAML. You can also specify that smaller text be used with the smaller option.

---
title: "My very first presentation using ioslides"
subtitle: "FISH 549"
author: "First Last"
date: "15 February 2023"
output:
  ioslides_presentation:
    widescreen: true
    smaller: true
---

Tip: If you only want the text to appear smaller on some of your slides, you can add the {.smaller} tag to the slide header. This can be particularly nice for large code blocks.

For example,

## Smaller code block {.smaller}

```{r small_code, echo = TRUE}
## a simple regression model
fit <- lm(dist ~ speed, data = cars)
## model summary
summary(fit)
```

Other layouts

You can center content in the middle of a slide by adding the {.flexbox} and {.vcenter} attributes to the slide title. For example:

## {.flexbox .vcenter}

### Some centered content

will create a slide that looks like this:

You can horizontally center a certain item on a slide by enclosing it in an HTML <div> tag with class="centered". For example

## A slide with some centered content

<div class="centered">
This text is centered
</div>

This text is not

will create a slide that looks like this:

Two columns

You can create a two-column layout using the HTML columns-2 class. For example, here is a slide with an image on the left and a bulleted list on the right

<div class="columns-2">
  ![](img/women_in_science.png)

  * A photo collage
  * of some women in science
  * featured in SAFS News
</div>

will create a slide that looks like this:

Text color

You can add colored text with any of the HTML color classes (eg, red, blue) or variations of them (eg, red2, blue2). For example, this code

## A slide with colored text

<div class="red2">
This text is red
</div>

<div class="blue">
This text is blue
</div>

will create a slide that looks like this:

Custom CSS

For even greater flexibility in formatting, you can write your own CSS in a separate file and include a reference to it in the YAML of your ioslides presentation. For example, if your CSS was written in custom_styles.css, then your YAML would include the following

---
output:
  ioslides_presentation:
    css: custom_styles.css
---

You can also target specific slides or classes of slides with custom CSS by adding IDs or classes to the slides headers within your document. For example, if we defined the following classes in the file custom_styles.css and included it in the same folder/directory as our .Rmd file:

.blue-text {
  color: blue;
}

.emphasized {
  font-size: 1.5em;
}

then we could include the following classes in the slide’s header

## Future Steps {.blue-text .bigger}

This is blue and bigger

which would look like this when rendered

Displaying your presentation

Every time you knit your .Rmd file, a corresponding file with an .html extension is created. This file can be opened in any web browser. You can use any of the following single character shortcuts to enable alternate display modes:

f: enable fullscreen mode
w: toggle widescreen mode
o: enable overview mode
h: enable code highlight mode
p: show presenter notes

Pressing esc exits all of these modes.

Presenter mode

You can open a separate presenter window that includes notes for yourself. The window will stay in sync with the main presentation window and also show any optional notes and a thumbnail of the next slide. To enable presenter mode add ?presentme=true to the URL of the presentation. For example:

my-presentation.html?presentme=true

The presenter mode window will open and will always re-open with the presentation until it is disabled with:

my-presentation.html?presentme=false

You can include presenter notes on a slide by enclosing them with the HTML notes class within a div. For example,

## Slide with presenter notes

<div class="notes">
Here are my notes for this slide:

* mention optional notes

* don't forget to exit
</div>

This slide has some notes, but they're hidden from view

You can then press p in your presentation to open a new window with the presentation and corresponding notes. For example, here’s what the presenter’s view will look like

Creating presentations with R Markdown

15 February 2023

Background

Rationale

Default options

ioslides

Title slide

Section breaks

Normal slide

Incremental bullets

No slide title

Adding code blocks

Code for plotting

Adding equations

Background image

Visual appearance

Other layouts

Two columns

Text color

Custom CSS

Displaying your presentation

Presenter mode