Making cool HTML slides in R

# Making cool HTML slides in R
## with the xaringan package
### 
### 2021-12-03

---

# Introduction

These slides provide an overview of how to use the `xaringan` package to create neat HTML slides in R.

To begin, press `h` to toggle between the slide you are currently viewing, and a help slide detailing keyboard shortcuts to use in `xaringan` slides.

---

## Installation

To install `xaringan` you can use either CRAN or Github (I used Github, I'm not sure if there's any major difference - the CRAN version might be more stable).

```r
install.packages('xaringan')
#or
remotes::install_github('yihui/xaringan')
```

## New xaringan file

You can create a new set of `xaringan` slides in RStudio via <br>
`File -> New File -> R Markdown -> From Template -> Ninja Presentation`

---

# xaringan pros and cons

Because `xaringan` uses `remark.js` (an in-browser markdown slideshow tool) instead of `pandoc`, there are some neat benefits, and one or two downsides.

### Main Pros

* `anicon` package works smoothly
* Syntax highlighting
* Presenter mode
* Slide scaling on different devices and resolutions
* Touch support for smart devices

### Main Cons

* The `pandoc` markdown converter doesn't work with `xaringan`, so you can't make citations using e.g. @citation
* Slides are not standalone HTML files with no external dependencies - in other words, none of the external dependencies like images will be embedded in the HTML output file by default

---

# Infinite Moon Reader

`xaringan` has a handy live-preview RStudio add-in, `infinite moon reader`, which lets you preview your slides. You can do this as follows:

* In RStudio, open your slides RMarkdown file.

* In the console, run the command `inf_mr()` <br> (short for `infinite_moon_reader()`)

* A preview of your slides should show up in the `Viewer` panel. 
<br> *It's worth noting, if you navigate to different sections of the file, the preview will change to that slide too!*

* Now, any changes you make to this file should show up in the preview slides, in real time (maybe with a second delay).

* If you close the preview for whatever reason, saving your file will reopen the (updated) preview.

*Note: `infinite moon reader` doesn't automatically work if you are updating details on the title page. But simply save the file and it should update.*

---

# Infinite Moon Reader suggested usage

For me, the easiest option seems to be:

* Open the slides file,

* Run `inf_mr()`,

* Click `Show in new window` in the `Viewer` section, so that a (larger) preview pops up in my browser,

* Remove the preview from the `Viewer` section (can be a bit distracting).

The slides in the browser should update automatically.

If for whatever reason this stops working, I just save the file and the browser preview updates (sometimes adding code makes it stop auto-updating I have found).

---

# Making slides in xaringan

We use three dashes, i.e. `---` to specify the beginning of a new slide (no other characters or white spaces are allowed after the dashes).

This must be preceded and followed by an empty line.

We can use hashes to denote larger text:

# 1 hash for a title,

## 2 hashes for a subtitle

### etc.

---

# Helpful additions for teaching

## Presenter Mode

A presenter mode is available to use in `xaringan` slides - these allow you to add details to slides that are only visible to you.
The main two things to include are:

* Notes with additional information. 
* A preview of the next slide, so you know what's up next.

You can add slide notes to a slide using `???`, similar to how we make a new slide.

These notes won't be immediately visible - press `p` to see them.

???

Yes there are some notes on this slide! As you can see, it's not just a simple pop-up, but rather quite a nicely laid out, intuitive display.

I would have loved using this instead of beamer slides.

You can press `p` again to close the Presenter mode.

---

## Presenter mode details

To ensure the presenter details don't distract the audience, you can clone your slideshow view by pressing `c`.

This opens a cloned view of the current slideshow in a new browser window, which keeps up with your presenter version (your browser might prevent pop-ups - mine did, so watch out for that).

I think this would work well with Zoom, but it would be good to test it out.

---

## Animated Icons

<span class="fa-2x faa-pulse animated " style=" display: -moz-inline-stack; display: inline-block; transform: rotate(0deg);">Success!</span>

I still don't understand why (since the identical code in `ioslides` or `slidy` slides fails), but the `anicon` package works well in `xaringan` slides (except for headings).

```r
anicon::faa("leaf")
```

```r
anicon::faa("leaf", size=2, bgcolour="MistyRose", colour="green")
```

<span class=" faa-vertical animated " style=" display: -moz-inline-stack; display: inline-block; transform: rotate(0deg);"><img src="LTU_logo.jpg" style="height:2em; width:auto; "/>&nbsp;We can use our own images too</span>

---

## Highlighting R Code - setup

With `xaringan` slides, we can highlight specific lines of R code, as desired.

We set this up by adding the line `highlightLines: true` in the YAML section, i.e.:

```r
---
  output:
  xaringan::moon_reader:
  nature:
  highlightLines: true
---
```

---

## Highlighting R Code - application

Then for any line of code you want highlighted:

* include a * at the start of the line,

* or include a trailing comment #<< <br>(this works even after comments - see code example below)

* or wrap the whole line in {{}}

Personally I would go with option 2 or 3, since the first option doesn't give you valid R code in the source document. Option 1 is an artifact from remark.js.

## Example

```r
*install.packages(palmerpenguins) # missing quotation marks!
install.packages("palmerpenguins")
```

*Note: Sometimes the infinite moon reader won't immediately work with stuff like this - you may need to refresh/save a few times before highlights appear.*

---

## Highlighting R code - final notes

you can also specify highlighting for specific rows in the code chunk specifications, e.g. by using the argument `highlight.output=c(1, 3)` we obtain:

```r
head(penguins)
```

```
*## # A tibble: 6 x 8
##   species island    bill_length_mm bill_depth_mm flipper_length_mm body_mass_g sex     year
*##   <fct>   <fct>              <dbl>         <dbl>             <int>       <int> <fct>  <int>
## 1 Adelie  Torgersen           39.1          18.7               181        3750 male    2007
## 2 Adelie  Torgersen           39.5          17.4               186        3800 female  2007
## 3 Adelie  Torgersen           40.3          18                 195        3250 female  2007
## 4 Adelie  Torgersen           NA            NA                  NA          NA <NA>    2007
## 5 Adelie  Torgersen           36.7          19.3               193        3450 female  2007
## 6 Adelie  Torgersen           39.3          20.6               190        3650 male    2007
```

The argument `highlight.output = TRUE` will highlight all output, and you can use `highlight.output=c(TRUE, FALSE)` to highlight every odd row, etc.

I think we can change the highlight colour, by changing the CSS theme file.

---

## Incremental slides

As you will have noticed, 
--
some of the preceding slides had content that appeared incrementally. This is very easy to set up -
--
we just add a line with two dashes, i.e. `--`, wherever we want content to pause on a slide.

This line doesn't have to be preceded and followed by a blank line (if it is the new content is placed on a new line).

[Yihue Xie has a whole slide presentation on this, if you would like to check it out.](https://slides.yihui.org/xaringan/incremental.html#1)

We can also build incremental slides using

* layout slides
* template slides

There are some slides about these options later.

---

## Countdown timers

We can add a countdown timer to slides, which I think could potentially be useful if we wanted to run snap tests for students during a presentation.

We do this by adding the argument `countdown:` under the `nature:` element in the YAML section. The number we specify is the countdown time in milliseconds - e.g. here we have specified 1 minute:

```r
---
   output:
   xaringan::moon_reader:
   nature:
   countdown: 60000
---
```

The timer resets whenever you move to a new slide. If you stay on a slide for longer than the timer limit, the count turns red.

Unfortunately, I can't find an option to include the timer for specific slides only.

---

## Autoplay

If you know that you need your content to be presented within a set interval of time, you could make your slides autoplay, by adding the argument `autoplay` under the `nature:` element in the YAML section (like for `countdown`). The number specified is the time spent on each slide (in milliseconds) before moving on to the next slide.

E.g. here we have specified 30 seconds per slide, and for the slides to loop once finished.

```r
 ---
   output:
   xaringan::moon_reader:
   nature:
   autoplay: 30000
   loop: true # to loop once the last slide is reached
---
```

---

## Maths

LaTeX maths works easily in `xaringan`, e.g. `$x=1$` using `$` or `$$x=1$$` using `$$`.

---

# Properties in xaringan

## class

You can add individual properties, like `class`, `name` and `background-image`, to each slide (do so before adding content for the slide).

We can use the `class` property to align content, e.g.

```r
# horizontal alignment options
class: right
class: left
class: center
# vertical alignment options
class: top
class: middle
class: bottom
```

*Note these have to be placed at the start of a slide to take effect.*

---

# Layout Slides

Using the `layout` and `class` properties, we can also change the presentation of a sub-series of slides.

The text shown here in this line and above is included in our base `layout` template, and will appear on all `layout` slides.

---

## Overview

A layout slide (with the slide property `layout: true` added before any slide text) is good for a series of slides that share some common elements, such as the top-level heading. Here we have set the class to be `inverse`.

---

## They work a little differently to other slides

Inside the `layout` slide environment, using `---` doesn't start a completely new slide, but rather leads to a new slide that inherits the layout properties of the first slide for which you have used the `layout: true` property.

---

So for example, here the `## Layout Slides` title is shown, along with the text included in the first `layout: true` slide, even though it's not included in the Markdown code for this specific slide.

---

You can also override or add more properties within `layout` slides, e.g. `background-image` - more on this soon.

---

Until you turn off the layout setting, it will continue to be used for subsequent slides.

---

By including `layout: false` in the slide properties, the layout slide setting will stop being used.

---

# Template slides

Using `--` and `layout: true` to create incremental slides should be flexible enough to be sufficient for most contexts.

If you want even more control over a section of slides, you can use `template` slides.

To create a template, we specify the desired properties at the start of a slide. These properties must include `name`, so that you can refer to this template on another slide.

Just like for `layout` slides, when you are specifying all the details for a new `template`, this should be done in a separate slide - anything included in the 'template creation' slide will be inherited by any slides using the template.

---

name: penguin
class: top
background-image: url("https://live.staticflickr.com/7476/15977828971_3658c9aa83_b.jpg")
background-size: contain

This slide has a template with the name `penguin`, and also has several other properties specified.

---

If I include the property `template: penguin` on another slide, the penguin template is used for the slide.

Please note, you can't use this template on a slide before the slide in which you defined the template.
You can however overwrite a template, so that's something to watch out for if using multiple templates in the one set of slides.

---
name: template-placeholder

## Placeholders in template slides

There is also the option to embed the contents of a new slide in a particular position within a template slide using a `placeholder` template.

For this to work, we have our usual slide content, and then we place the code `$\{\{content\}\}$` in the section of the slide where we would like new content to appear in subsequent slides.

This slide uses a `placeholder` template, and has the property `name: template-placeholder` specified.
The `$\{\{content\}\}$` code has been placed between the heading on this slide, and the text.

---

Here is an example of how this `placeholder` template works. As you can see, this text is appearing in the position specified via the inclusion of the code `$\{\{content\}\}$` in the initial `placeholder` template slide.

I'm not sure how useful this option is, but I figured it was worth covering.

---

# class options for segmenting slides

We can style slide elements using CSS - the built-in classes offer a few ways to segment slides into columns.

2. We can have details on the left
]

2. And then more details on the right

3. With the same

4. Or a different number of rows

5. These two columns are equal width
]

---

## Three columns

.left[It's worth noting] .center[that if we have] .right[too many words in a column specified this way, then the columns can overlap, which is a shame]

---

## Sidebars

If you use multiple headings here,

only the first final heading will be black

### Previous headings will be grey
]

.right-column[
We can also include sidebars in our slides, using <br> `.left-column` and `.right-column`.

By default the left sidebar is narrow (20% of the slide width)
]

---

Using the `class` property, you can also assign specific `themes` to slides, via CSS.

This means you will need a separate CSS file, which you call in the YAML output section - indented in the line below `xaringan::moon_reader:`.

```r
 e.g.
---
   output:
   xaringan::moon_reader:
   css: ["default", "extra.css"]
---
```

---

# Themes in xaringan

If we want to change the default theme, we can include a custom-made CSS file.

Alternatively, rather than making our own CSS file from scratch, we could use, or modify, one of the existing available themes. To check available themes, we run the R code:

```r
names(xaringan:::list_css())
```

To use one of the available themes, we specify the `css` option in the YAML section, e.g.:

```r
---
output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
---
```

---

## List of Themes available

```
##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"    "default"          "duke-blue"        "fc-fonts"         "fc"              
##  [8] "glasgow_template" "hygge-duke"       "hygge"            "ki-fonts"         "ki"               "kunoichi"         "lucy-fonts"      
## [15] "lucy"             "metropolis-fonts" "metropolis"       "middlebury-fonts" "middlebury"       "nhsr-fonts"       "nhsr"            
## [22] "ninjutsu"         "rladies-fonts"    "rladies"          "robot-fonts"      "robot"            "rutgers-fonts"    "rutgers"         
## [29] "shinobi"          "tamu-fonts"       "tamu"             "uio-fonts"        "uio"              "uo-fonts"         "uo"              
## [36] "uol-fonts"        "uol"              "useR-fonts"       "useR"             "uwm-fonts"        "uwm"
```

*Note: Some separate documents will be made to show the different available themes.*

---

background-image: url("https://live.staticflickr.com/7563/16054445089_d1f4f77853_b.jpg")
background-position: center
background-size: contain

# Adding background images

Here I have used the CSS property **background-image** to add an image from the Internet.
I can also use the related properties **background-position** and **background-size** to adjust the image.

---

class: middle
background-image: url(LTU_logo.jpg)
background-position: top
background-size: 50%

We can also add local images.

* `background-position` takes arguments similar to `class` - i.e. `left`, `right`, `top`, `center` and `middle`.
* `background-size` options include `contain` (to stretch or condense the image to fit the whole slide) or specific numbers to scale the image, e.g. `background-size: 15%`.

---

## Videos

As well as images, you can also include YouTube videos:

* Navigate to a YouTube video
* Click the `Share` button under the video
* Select the `embed` option
* Copy and paste the code

---

template:penguin

#### Just a reminder that once a template is defined, you can include a template slide wherever you want later on in your slides.

This could be handy if we wanted to have a template for quizzes, for example.
---

# Interactive Content

We can use packages like `plotly`, `leaflet` and `DT` to include interactive content in our slides - e.g.:

<div id="htmlwidget-7a1eeacf3dd36b3c7896" style="width:648px;height:360px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-7a1eeacf3dd36b3c7896">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[-37.72,145.05],15,[]]},"evals":[],"jsHooks":[]}</script>

---

## Interactive tables

Interactive tables (created using the `DT` (DataTables) R package) might be of more immediate applicability - e.g.:

<div id="htmlwidget-5f77a1473db9badc4d82" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-5f77a1473db9badc4d82">{"x":{"filter":"none","vertical":false,"fillContainer":false,"data":[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176","177","178","179","180","181","182","183","184","185","186","187","188","189","190","191","192","193","194","195","196","197","198","199","200","201","202","203","204","205","206","207","208","209","210","211","212","213","214","215","216","217","218","219","220","221","222","223","224","225","226","227","228","229","230","231","232","233","234","235","236","237","238","239","240","241","242","243","244","245","246","247","248","249","250","251","252","253","254","255","256","257","258","259","260","261","262","263","264","265","266","267","268","269","270","271","272","273","274","275","276","277","278","279","280","281","282","283","284","285","286","287","288","289","290","291","292","293","294","295","296","297","298","299","300","301","302","303","304","305","306","307","308","309","310","311","312","313","314","315","316","317","318","319","320","321","322","323","324","325","326","327","328","329","330","331","332","333","334","335","336","337","338","339","340","341","342","343","344"],["Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Adelie","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Gentoo","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap","Chinstrap"],["Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Torgersen","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Biscoe","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream","Dream"],[39.1,39.5,40.3,null,36.7,39.3,38.9,39.2,34.1,42,37.8,37.8,41.1,38.6,34.6,36.6,38.7,42.5,34.4,46,37.8,37.7,35.9,38.2,38.8,35.3,40.6,40.5,37.9,40.5,39.5,37.2,39.5,40.9,36.4,39.2,38.8,42.2,37.6,39.8,36.5,40.8,36,44.1,37,39.6,41.1,37.5,36,42.3,39.6,40.1,35,42,34.5,41.4,39,40.6,36.5,37.6,35.7,41.3,37.6,41.1,36.4,41.6,35.5,41.1,35.9,41.8,33.5,39.7,39.6,45.8,35.5,42.8,40.9,37.2,36.2,42.1,34.6,42.9,36.7,35.1,37.3,41.3,36.3,36.9,38.3,38.9,35.7,41.1,34,39.6,36.2,40.8,38.1,40.3,33.1,43.2,35,41,37.7,37.8,37.9,39.7,38.6,38.2,38.1,43.2,38.1,45.6,39.7,42.2,39.6,42.7,38.6,37.3,35.7,41.1,36.2,37.7,40.2,41.4,35.2,40.6,38.8,41.5,39,44.1,38.5,43.1,36.8,37.5,38.1,41.1,35.6,40.2,37,39.7,40.2,40.6,32.1,40.7,37.3,39,39.2,36.6,36,37.8,36,41.5,46.1,50,48.7,50,47.6,46.5,45.4,46.7,43.3,46.8,40.9,49,45.5,48.4,45.8,49.3,42,49.2,46.2,48.7,50.2,45.1,46.5,46.3,42.9,46.1,44.5,47.8,48.2,50,47.3,42.8,45.1,59.6,49.1,48.4,42.6,44.4,44,48.7,42.7,49.6,45.3,49.6,50.5,43.6,45.5,50.5,44.9,45.2,46.6,48.5,45.1,50.1,46.5,45,43.8,45.5,43.2,50.4,45.3,46.2,45.7,54.3,45.8,49.8,46.2,49.5,43.5,50.7,47.7,46.4,48.2,46.5,46.4,48.6,47.5,51.1,45.2,45.2,49.1,52.5,47.4,50,44.9,50.8,43.4,51.3,47.5,52.1,47.5,52.2,45.5,49.5,44.5,50.8,49.4,46.9,48.4,51.1,48.5,55.9,47.2,49.1,47.3,46.8,41.7,53.4,43.3,48.1,50.5,49.8,43.5,51.5,46.2,55.1,44.5,48.8,47.2,null,46.8,50.4,45.2,49.9,46.5,50,51.3,45.4,52.7,45.2,46.1,51.3,46,51.3,46.6,51.7,47,52,45.9,50.5,50.3,58,46.4,49.2,42.4,48.5,43.2,50.6,46.7,52,50.5,49.5,46.4,52.8,40.9,54.2,42.5,51,49.7,47.5,47.6,52,46.9,53.5,49,46.2,50.9,45.5,50.9,50.8,50.1,49,51.5,49.8,48.1,51.4,45.7,50.7,42.5,52.2,45.2,49.3,50.2,45.6,51.9,46.8,45.7,55.8,43.5,49.6,50.8,50.2],[18.7,17.4,18,null,19.3,20.6,17.8,19.6,18.1,20.2,17.1,17.3,17.6,21.2,21.1,17.8,19,20.7,18.4,21.5,18.3,18.7,19.2,18.1,17.2,18.9,18.6,17.9,18.6,18.9,16.7,18.1,17.8,18.9,17,21.1,20,18.5,19.3,19.1,18,18.4,18.5,19.7,16.9,18.8,19,18.9,17.9,21.2,17.7,18.9,17.9,19.5,18.1,18.6,17.5,18.8,16.6,19.1,16.9,21.1,17,18.2,17.1,18,16.2,19.1,16.6,19.4,19,18.4,17.2,18.9,17.5,18.5,16.8,19.4,16.1,19.1,17.2,17.6,18.8,19.4,17.8,20.3,19.5,18.6,19.2,18.8,18,18.1,17.1,18.1,17.3,18.9,18.6,18.5,16.1,18.5,17.9,20,16,20,18.6,18.9,17.2,20,17,19,16.5,20.3,17.7,19.5,20.7,18.3,17,20.5,17,18.6,17.2,19.8,17,18.5,15.9,19,17.6,18.3,17.1,18,17.9,19.2,18.5,18.5,17.6,17.5,17.5,20.1,16.5,17.9,17.1,17.2,15.5,17,16.8,18.7,18.6,18.4,17.8,18.1,17.1,18.5,13.2,16.3,14.1,15.2,14.5,13.5,14.6,15.3,13.4,15.4,13.7,16.1,13.7,14.6,14.6,15.7,13.5,15.2,14.5,15.1,14.3,14.5,14.5,15.8,13.1,15.1,14.3,15,14.3,15.3,15.3,14.2,14.5,17,14.8,16.3,13.7,17.3,13.6,15.7,13.7,16,13.7,15,15.9,13.9,13.9,15.9,13.3,15.8,14.2,14.1,14.4,15,14.4,15.4,13.9,15,14.5,15.3,13.8,14.9,13.9,15.7,14.2,16.8,14.4,16.2,14.2,15,15,15.6,15.6,14.8,15,16,14.2,16.3,13.8,16.4,14.5,15.6,14.6,15.9,13.8,17.3,14.4,14.2,14,17,15,17.1,14.5,16.1,14.7,15.7,15.8,14.6,14.4,16.5,15,17,15.5,15,13.8,16.1,14.7,15.8,14,15.1,15.2,15.9,15.2,16.3,14.1,16,15.7,16.2,13.7,null,14.3,15.7,14.8,16.1,17.9,19.5,19.2,18.7,19.8,17.8,18.2,18.2,18.9,19.9,17.8,20.3,17.3,18.1,17.1,19.6,20,17.8,18.6,18.2,17.3,17.5,16.6,19.4,17.9,19,18.4,19,17.8,20,16.6,20.8,16.7,18.8,18.6,16.8,18.3,20.7,16.6,19.9,19.5,17.5,19.1,17,17.9,18.5,17.9,19.6,18.7,17.3,16.4,19,17.3,19.7,17.3,18.8,16.6,19.9,18.8,19.4,19.5,16.5,17,19.8,18.1,18.2,19,18.7],[3750,3800,3250,null,3450,3650,3625,4675,3475,4250,3300,3700,3200,3800,4400,3700,3450,4500,3325,4200,3400,3600,3800,3950,3800,3800,3550,3200,3150,3950,3250,3900,3300,3900,3325,4150,3950,3550,3300,4650,3150,3900,3100,4400,3000,4600,3425,2975,3450,4150,3500,4300,3450,4050,2900,3700,3550,3800,2850,3750,3150,4400,3600,4050,2850,3950,3350,4100,3050,4450,3600,3900,3550,4150,3700,4250,3700,3900,3550,4000,3200,4700,3800,4200,3350,3550,3800,3500,3950,3600,3550,4300,3400,4450,3300,4300,3700,4350,2900,4100,3725,4725,3075,4250,2925,3550,3750,3900,3175,4775,3825,4600,3200,4275,3900,4075,2900,3775,3350,3325,3150,3500,3450,3875,3050,4000,3275,4300,3050,4000,3325,3500,3500,4475,3425,3900,3175,3975,3400,4250,3400,3475,3050,3725,3000,3650,4250,3475,3450,3750,3700,4000,4500,5700,4450,5700,5400,4550,4800,5200,4400,5150,4650,5550,4650,5850,4200,5850,4150,6300,4800,5350,5700,5000,4400,5050,5000,5100,4100,5650,4600,5550,5250,4700,5050,6050,5150,5400,4950,5250,4350,5350,3950,5700,4300,4750,5550,4900,4200,5400,5100,5300,4850,5300,4400,5000,4900,5050,4300,5000,4450,5550,4200,5300,4400,5650,4700,5700,4650,5800,4700,5550,4750,5000,5100,5200,4700,5800,4600,6000,4750,5950,4625,5450,4725,5350,4750,5600,4600,5300,4875,5550,4950,5400,4750,5650,4850,5200,4925,4875,4625,5250,4850,5600,4975,5500,4725,5500,4700,5500,4575,5500,5000,5950,4650,5500,4375,5850,4875,6000,4925,null,4850,5750,5200,5400,3500,3900,3650,3525,3725,3950,3250,3750,4150,3700,3800,3775,3700,4050,3575,4050,3300,3700,3450,4400,3600,3400,2900,3800,3300,4150,3400,3800,3700,4550,3200,4300,3350,4100,3600,3900,3850,4800,2700,4500,3950,3650,3550,3500,3675,4450,3400,4300,3250,3675,3325,3950,3600,4050,3350,3450,3250,4050,3800,3525,3950,3650,3650,4000,3400,3775,4100,3775]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>species<\/th>\n      <th>island<\/th>\n      <th>bill_length_mm<\/th>\n      <th>bill_depth_mm<\/th>\n      <th>body_mass_g<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":8,"columnDefs":[{"className":"dt-right","targets":[3,4,5]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

---

It's worth noting that in general, if you want to generate a table, it should be in HTML format (instead of Markdown or other formats), e.g.,

```r
knitr::kable(head(penguins), format = 'html')
```

<table>
 <thead>
  <tr>
   <th style="text-align:left;"> species </th>
   <th style="text-align:left;"> island </th>
   <th style="text-align:right;"> bill_length_mm </th>
   <th style="text-align:right;"> bill_depth_mm </th>
   <th style="text-align:right;"> flipper_length_mm </th>
   <th style="text-align:right;"> body_mass_g </th>
   <th style="text-align:left;"> sex </th>
   <th style="text-align:right;"> year </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.1 </td>
   <td style="text-align:right;"> 18.7 </td>
   <td style="text-align:right;"> 181 </td>
   <td style="text-align:right;"> 3750 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.5 </td>
   <td style="text-align:right;"> 17.4 </td>
   <td style="text-align:right;"> 186 </td>
   <td style="text-align:right;"> 3800 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 40.3 </td>
   <td style="text-align:right;"> 18.0 </td>
   <td style="text-align:right;"> 195 </td>
   <td style="text-align:right;"> 3250 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:right;"> NA </td>
   <td style="text-align:left;"> NA </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 36.7 </td>
   <td style="text-align:right;"> 19.3 </td>
   <td style="text-align:right;"> 193 </td>
   <td style="text-align:right;"> 3450 </td>
   <td style="text-align:left;"> female </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Adelie </td>
   <td style="text-align:left;"> Torgersen </td>
   <td style="text-align:right;"> 39.3 </td>
   <td style="text-align:right;"> 20.6 </td>
   <td style="text-align:right;"> 190 </td>
   <td style="text-align:right;"> 3650 </td>
   <td style="text-align:left;"> male </td>
   <td style="text-align:right;"> 2007 </td>
  </tr>
</tbody>
</table>

---

## Modifying the title slide

I noted earlier that the title slide is created automatically, and is set to `class: center, middle, inverse, title-slide` by default.

However we can modify the classes applied to the title slide with the `titleSlideClass` option of `nature` (`title-slide` is always applied), e.g.:

```r
 output:
   xaringan::moon_reader:
   nature:
   titleSlideClass: [top, left, inverse]
```

or remove it completely via the `seal` option.
---

## Self-contained mode

I noted earlier that by default `xaringan` slides' html outputs aren't self-contained - but we can change this.

To turn the self-contained mode on, use

```r
output:
   xaringan::moon_reader:
   self_contained: true
```

Apparently this may or may not work. To improve the chances of it working, for images we include in the slides, we should use

* `![](PATH)`
* or  `<img src="PATH" />`
* or `background-image: url(PATH)`

to be safe.

---

# Working offline

By default `xaringan` slides work best online.
If working offline, you need to have a copy of `remark.js` downloaded.

You can download the latest version using

```r
xaringan::summon_remark()
```

It should be saved to `libs/remark-latest.min.js`.
 
Then you need to change the details in the YAML section using the `chakra` element, e.g.:

```r
 output:
   xaringan::moon_reader:
   chakra: libs/remark-latest.min.js
```

---

I hope this has provided a helpful overview of the `xaringan` package.

---

## Extra links

[remark overview](https://remarkjs.com/#1)

[remark slide property options](https://github.com/gnab/remark/wiki/Markdown#slide-properties)

[DT package](https://rstudio.github.io/DT/)