ioslides demo

September 21, 2016

Use one hash (#) to create a section

Use two hashes (##) to set a frame's header

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see http://rmarkdown.rstudio.com.

When you click the Knit button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.

Section 1 Slide with Bullets

Use attribute {.build} to indicate that their content should be displayed incrementally.
Slide attributes can be combined if you need to specify more than one
For example, ## Getting up {.smaller .build}

Section 1 Slide with R Code and Output

The output will be smaller if we add {.smaller} on the frame header

summary(cars)

##      speed           dist       
##  Min.   : 4.0   Min.   :  2.00  
##  1st Qu.:12.0   1st Qu.: 26.00  
##  Median :15.0   Median : 36.00  
##  Mean   :15.4   Mean   : 42.98  
##  3rd Qu.:19.0   3rd Qu.: 56.00  
##  Max.   :25.0   Max.   :120.00

Section 1 Slide with R Code and Output (original output)

summary(cars)

##      speed           dist       
##  Min.   : 4.0   Min.   :  2.00  
##  1st Qu.:12.0   1st Qu.: 26.00  
##  Median :15.0   Median : 36.00  
##  Mean   :15.4   Mean   : 42.98  
##  3rd Qu.:19.0   3rd Qu.: 56.00  
##  Max.   :25.0   Max.   :120.00

Section 1 Slide with Plot

In the morning

Getting up

What I like to do first thing

Add a subtitle to a slide or section by including text after the pipe (|) character
For example, Getting up | What I like to do first thing

use four hyphens (- - - -) to create a new frame without a header

add picture using
```
![caption](path) 
```
picture of SOE

Display Modes

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

Going to sleep

target specific slides or classes of slice with custom CSS by adding ids or classes to the slides headers within your document
For example, Going to sleep {#nextsteps .emphasized} (see ioslides_style.css)
Need to use css option in YAML: css: styles.css

Code highlighting

x <- 10
y <- x * 2 
z <- 1 + 3
yy <- exp(4) + log(10)

Code - HTML

<div class="notes">
This is my *note*.

- It can contain markdown
- like this list

</div>

Code - CSS

#nextsteps {
   color: blue;
}

.emphasized {
   font-size: 1.2em;
}

Code - R

# load("data/salary.RData")
data(salary, package="DSC2014Tutorial")
knitr::opts_chunk$set(warning = FALSE,
                      echo = FALSE,
                      message = FALSE)

Code - Markdown

A friend once said:

> It's always better to give
> than to receive.

---
output:
  ioslides_presentation:
    incremental: true
---

Tables

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Font color

Roses are red,
violets are blue.

Add logo

use option logo: logo.png
the rectangular element containing it can be customised with CSS
See .gdbar img and .gdbar in ioslides_style.css file

Layout

use {.flexbox .vcenter} attributes to center content on a slide

Layout 2

horizontally center content by enclosing it in a div tag with class centered
This text is centered.

Layout 3

two-column layout using the columns-2 class.

Bullet 1
Bullet 2
Bullet 3

Text Color

color content using base color classes red, blue, green, yellow, and gray (or variations of them e.g. red2, red3, blue2, blue3, etc.)
This text is red

Presenter mode

Math Equations

\(y = \beta_1x + \beta_0\)

Includes

include content in the document header or before/after the document body
includes:
- in_header: header.html
- before_body: doc_prefix.html
- after_body: doc_suffix.html