5/25/2021

ioslides

  • ioslides is one of the presentation format that can be easily put together using R Markdown.

  • It has good compatibility with html, and very easy set-up.

YAML options

Similar to R Markdown for html_documents, ioslides_presentation also requires a YAML setting in the begining of the rmd. Some of the features can be specified like:

output:

| ioslides_presentation:

| incremental: true (render bullets incrementallly throughout the slides)

| widescreen: true (present slide using wider form)

| smaller: true (use smaller text size throughout the slides)

| transition: default, slower, faster, 0.5 (choose transition speed, or specify how many seconds)

| logo: logo.png (set a logo with the size of 85 * 85 )

headers and bulletpoints

  • Similar to documents, headers have levels and is specified by #, ## or ###.

  • Bullet point can be achieved by entering text after -.

  • Bullets can be incremental, by entering text after > -
  • A section can also be incremental
    • using > * for the first line, and >tab* for the following lines
  • A whole slide can be set to incremental by adding {.build} after the header (see the presenting slide for example).
  • A subtitle can be added by including text after the | character (see the add plot slide for example).

text size

A smaller text size can be achieved by adding {.smaller} after the header (this slide used smaller text size).

page break

page break is achieved by entering three hyphens ---.

presenting

While using browser to open and present ioslides, one can alter display modes by tapping:

f: fullscreen mode

w: widescreen mode

o: overview mode

h: code highlight mode

p: presenter notes

add plot

(check RMD for pseudo data code)

Adding a plot to ioslides is rather similar to that html document.

## Warning: Removed 3 rows containing missing values (geom_point).
scatter plot

scatter plot

background color

Background color can be achieved by adding {data-background=#00B9E3} after the header.

background image

Background image can be achieved by adding {data-background=lake.jpg data-background-size=cover} after the header.

code chunks

Most of the code-chunk specifications in the regular document RMD can be used in the presentation RMD.

## # A tibble: 2 x 2
##   Employed     n
## * <chr>    <int>
## 1 No          74
## 2 Yes         26

highlight code

To highlight a set of code chunks (bold the code), use a special highlight comment around the code.

### <b>

code

### </b>

For example:

PseudoData %>% count(Employed)

tables

Tables can be added in a variety of ways, like kable, reactable, and such.

Here we use a tbl_summary (library: gtsummary) created summary table as an example.

Variable N Overall, N = 1001 No, N = 741 Yes, N = 261
Grade_Math_Y1 98 70 (62, 76) 69 (62, 74) 75 (70, 82)
Unknown 2 1 1
Gender 100
Female 65 (65%) 48 (65%) 17 (65%)
Male 35 (35%) 26 (35%) 9 (35%)

1 Median (IQR) or Frequency (%)

centering content

You can center content vertically for the whole slide by adding {.flexbox .vcenter} to the header.

You can also center certain content horizontally by specifying the following

<dev class="centered">

This whole section is centered

</div>

two-column layout

A two-column layout can be done by wrapping two chunks of codes with a specific class. See the following for example.

  • This is achieved by

<div class="columns-2">

plot code

text code

</div>

text formatting

Bold text can be achieved by **Bold**.

Italic text can be achieved by *Italic*

Color text can be achieved by:

<div class="red2">

Color text

</div>

add notes

The way of adding notes to a slide is included in the note of this slide.

a few other items

Most of the feature that html_document has also applies to ioslide_presentation, for example: figure options, data frame printing, document dependencies, header and before/after body inclusions, math equations and such.

If need to convert to pdf, the best way is to open the ioslide in chrome, then print as pdf.

Other presentation format

Each of the other presentation format has its own style, unique utility and slide different coding convention.

  • slidy: for example, allows showing table of content in display mode, allows adding footer, and adding countdown timer.

  • beamer: for example, allows pre-defined color/font themes, and slide levels.

  • powerpoint: for example, is one of the most widely used presentation format, similar to docx format, which is also from Microsoft, allows loading custom templates.