xaringan template for Duke University
Combined CSS Styles
John Little
2023-03-16
1 / 38

xaringan -- dukeslides

/ʃæ.'riŋ.ɡæn/

This dukeslides example slide deck extends the excellent collaborative work of the xaringan and Remark.js slide tools. With this template, slide authors can compose xaringan slides via R Markdown and present with Duke University branding.

Yihui Xie provides wonderful technical documentation and a wiki for the xaringan package. Some of his documentation is repeated here.

My goal is to present example slides with example R Markdown and xaringan syntax to demonstrate presentation styles.

2 / 38

NOTE

Many of the cheat sheet examples are displayed in the slide itself. Some of the example code will be found in the presenter notes.

Access presenter notes by pressing the keyboard shortcut p. (Or, ? for other shortcuts)

Full detailed R Markdown can always be displayed by opening the rendered HTML slides in your web browser via View Source.

3 / 38

CSS styles

The CSS style used in this example are

xaringan default (default)
xaringan default font (default-fonts)
Duke Unversity color palette (duke-blue)
Duke color palette overlaid on Hygge CSS, (hygge-duke)
Creative Commons licensing fonts (CC BY-NC, etc.) (cc-fonts.css)
figure captions (figures.css)

You can find these style sheets declared in the yaml header inside the R Markdown file.

4 / 38

# Display background image with background-image: url()
#
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Duke_University_logo.svg/640px-Duke_University_logo.svg.png)

5 / 38

Image credit: Wikimedia Commons

Get Started---
class: inverse, center, middle
# Get Started

6 / 38

Hello World

Install the dukeslides¹ package from Github

# monospace font is displayed when code is written 
# inside of an Rmarkdown code chunk
devtools::install_github("libjohn/dukeslides")

Create a new R Markdown document from the menu File -> New File -> R Markdown -> From Template -> Slide template for Duke University

Click the Knit button to compile the slide into rendered HTML

[1] dukeslides is a Duke University branded version of xaringan presentation slides.

7 / 38

Making Bullets

List items (bullets) are invoked with a leading, left-justified dash, just like any Rmarkdown¹ document

- List items (bullets) are invoked with a leading,
left-justified dash, just like any 
Rmarkdown<sup>1</sup> document

[1] Getting Started with R Markdown

8 / 38

Making Bullets

List items (bullets) are invoked with a leading, left-justified dash, just like any Rmarkdown¹ document

- List items (bullets) are invoked with a leading,
left-justified dash, just like any 
Rmarkdown<sup>1</sup> document

[1] Getting Started with R Markdown

--

Two left-justified dashes creates a pause to reveal the slide in increments. arrow keys and number keys advance from slide to slide. See more documentation on incrementing

8 / 38

Knit

As previously mentioned,

Click the Knit button to compile the slide into rendered HTML

Or, use the RStudio Addin "Infinite Moon Reader" to live preview the slides (every time you update and save the Rmd document, the slides will be automatically reloaded in RStudio Viewer.

9 / 38

Rock Cairn Hiking

---
background-image: url(https://c2.staticflickr.com/6/5729/30943501632_eb0b200eed_b.jpg)
class: center, top
# Rock Cairn Hiking
.footer-note[.tiny[.green[Image Credit: ][Brandon Rasmussen](https://www.flickr.com/photos/137029081@N02/30943501632/in/photostream/)]]

Image Credit: Brandon Rasmussen

10 / 38

---
background-image: url(https://c2.staticflickr.com/6/5729/30943501632_eb0b200eed_b.jpg)
class: center, top, inverse
# Rock Cairn Hiking
.footer-note[.tiny[.green[Image Credit: ][Brandon Rasmussen](https://www.flickr.com/photos/137029081@N02/30943501632/in/photostream/)]]

Two Column

You can generate a left column
by wrapping the left-hand text in .pull-left[ foo ]
TAGS ¹
Splunk

You can generate a right column
by wrapping the right-hand text in .pull-right[ foo ]
foo
foo ²

# superscript is wrapped in HTML
TAGS <sup>1</sup>

[1] example foonote 1 -- footnote text wrapped in .footnote[foo]

[2] example footnote 2

11 / 38

inverse

h3

Lorem Ipsum

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

---
class: inverse
## inverse
### h3
Lorem Ipsum
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

12 / 38

duke-softblue

---
class: duke-softblue

Lorem Ipsum

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

one
Google
three

13 / 38

duke-orange

---
class: duke-orange

Lorem Ipsum

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

one
Google
three

14 / 38

duke-green

---
class: duke-green

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

15 / 38

hygge-duke Two Column

qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

.pull-left[ 
   nabisco crackers 
   snackum attackum ...
   ]

Wrap the right-hand text in .pull-right[ .content-box-blue]

.pull-right[.full-width[
  .rotate-left[
    .content-box-blue[snackum 
      nabiskum]
]]]

background-size: contain
View Source to see all of the R Markdown for this slide

16 / 38

Image credit: http://www.publicdomainpictures.net/view-image.php?image=167489

Modifying text

Font sizes

This is normal size ( $L A T E X$ -friendly terms)

Large

large

small

footnotesize

scriptsize

tiny

Text color

black

red

blue

green, yellow, orange, purple, gray or grey

You can also use .bold[] or .bolder[] to emphasize text

This is bold, this is bolder and this is regular markdown double-star bold (visible differences depend on the font)

Hegge CSS + Duke Color Palette = hegge-duke.css

]

17 / 38

Coloured content boxes

Use .content-box-blue (or gray/grey, duke-green, green, purple, red, or yellow) to produce a box with coloured background. Size depends on content.

.content-box-blue[I feel blue] yields

I feel blue

Wrap in .full-width to expand the width

I feel wide and red

If you have content in columns then you get

WARNING Look out for minons or bananas The box to the left was created using .pull-left[.full-width[.content-box-yellow[]]]

18 / 38

Coloured content boxes

blue gray grey neutral

duke-green green purple

red yellow

19 / 38

CSS

CSS is the key to managing the style of your slides. The cascading style sheets (CSS) are declared in the yaml header.

output:
  xaringan::moon_reader:
    css: ["default", "ubuntu-mono.css"]

Slide #4 documents the styles used in this presentation
The next slide provides some information on customizing or accessing available themes

20 / 38

CSS User-Contributed Themes

User-contributed themes. A theme typically consists of two CSS files foo.css and foo-fonts.css, where foo is the theme name. Below are some existing themes:

names(xaringan:::list_css())

##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"    "default"         
##  [5] "duke-blue"        "fc-fonts"         "fc"               "glasgow_template"
##  [9] "hygge-duke"       "hygge"            "ki-fonts"         "ki"              
## [13] "kunoichi"         "lucy-fonts"       "lucy"             "metropolis-fonts"
## [17] "metropolis"       "middlebury-fonts" "middlebury"       "nhsr-fonts"      
## [21] "nhsr"             "ninjutsu"         "rladies-fonts"    "rladies"         
## [25] "robot-fonts"      "robot"            "rutgers-fonts"    "rutgers"         
## [29] "shinobi"          "tamu-fonts"       "tamu"             "uio-fonts"       
## [33] "uio"              "uo-fonts"         "uo"               "uol-fonts"       
## [37] "uol"              "useR-fonts"       "useR"             "uwm-fonts"       
## [41] "uwm"              "wic-fonts"        "wic"

To use a theme, you can specify the css option as an array of CSS filenames (without the .css extensions), e.g.,

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

If you want to contribute a theme to xaringan, please read this blog post.

21 / 38

Figure Captions
  
     Image Credit:  
      Salad Onions by Jessica Spengler 
    
<figure>
  <img src="foo.png">
    <figcaption> Image Credit: foo text here </figcaption>
</figure>
# Must declare figure-captions in the YAML header
# Must use HTML instead of RMarkdown

22 / 38

23 / 38

Presenter Notes go here use 'p' to toggle the presenter mode or '?' or 'h' to toggle the help / key-shortcut options

Image credit: Wikimedia Commons

More xaringan Documentation24 / 38

xaringan

Provides an R Markdown output format xaringan::moon_reader as a wrapper for remark.js, and you can use it in the YAML metadata, e.g.

---
title: "A Cool Presentation"
output:
  xaringan::moon_reader
    yolo: true
    nature:
      autoplay: 30000
---

See the help page ?xaringan::moon_reader for all possible options that you can use.

25 / 38

using xaringan

Start with an R Markdown document;
R Markdown (can embed R/other code chunks);
Provide an option autoplay;
MathJax just works;^*
Highlight code with {{}};
The RStudio addin "Infinite Moon Reader" automatically refreshes slides on changes;

[*] Not really. See next page.

26 / 38

Math Expressions

You can write LaTeX math expressions inside a pair of dollar signs, e.g. $\alpha+\beta$ renders $α + β$ . You can use the display style with double dollar signs:

$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$

$\bar{X} = \frac{1}{n} \sum_{i = 1}^{n} X_{i}$

Limitations:

The source code of a LaTeX math expression must be in one line, unless it is inside a pair of double dollar signs, in which case the starting $$ must appear in the very beginning of a line, followed immediately by a non-space character, and the ending $$ must be at the end of a line, led by a non-space character;
There should not be spaces after the opening $ or before the closing $.
Math does not work on the title slide (see #61 for a workaround).

27 / 38

R Plots

# visualizations are cool, duh.
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)

28 / 38

Tables

If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,

knitr::kable(head(iris), format = 'html')

Sepal.Length	Sepal.Width	Petal.Length	Petal.Width	Species
5.1	3.5	1.4	0.2	setosa
4.9	3.0	1.4	0.2	setosa
4.7	3.2	1.3	0.2	setosa
4.6	3.1	1.5	0.2	setosa
5.0	3.6	1.4	0.2	setosa
5.4	3.9	1.7	0.4	setosa

29 / 38

more HTML (kable) table

Items	Features
Item 1	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tempor ex. Morbi malesuada sagittis turpis, at venenatis nisl luctus a.
Item 2	In eu urna at magna luctus rhoncus quis in nisl. Fusce in velit varius, posuere risus et, cursus augue. Duis eleifend aliquam ante, a aliquet ex tincidunt in.
Item 3	Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis.

Kable HTML Documentation

Documentation for HTML (kable) tables via the library(kableExtra) package

30 / 38

HTML Widgets

library(leaflet)
leaflet() %>% addTiles() %>% setView(-93.65, 42.0285, zoom = 17)

31 / 38

DT::datatable(
  head(iris, 10),
  fillContainer = FALSE, options = list(pageLength = 8)
)

Show entries

Search:

	Sepal.Length	Sepal.Width	Petal.Length	Petal.Width	Species
1	5.1	3.5	1.4	0.2	setosa
2	4.9	3	1.4	0.2	setosa
3	4.7	3.2	1.3	0.2	setosa
4	4.6	3.1	1.5	0.2	setosa
5	5	3.6	1.4	0.2	setosa
6	5.4	3.9	1.7	0.4	setosa
7	4.6	3.4	1.4	0.3	setosa
8	5	3.4	1.5	0.2	setosa

Showing 1 to 8 of 10 entries

Previous1 2Next

32 / 38

Highlight Code

The option highlightLines: true of nature will highlight code lines that start with *, or are wrapped in {{ }}, or have trailing comments #<<;

output:
  xaringan::moon_reader:
    nature:
      highlightLines: true

See examples on the next page.

33 / 38

Highlight Code with * or `{{}}`

An example using a leading *:

if (TRUE) {
* message("Very important!")
}

Output:

if (TRUE) {
  message("Very important!")
}

This is invalid R code, so it is a plain fenced code block that is not executed.

An example using {{}}:

`{r tidy=FALSE} if (TRUE) { *{{ message("Very important!") }} }


Output:
```r
if (TRUE) {
  message("Very important!") 
}

## Very important!

It is valid R code so you can run it. Note that {{}} can wrap an R expression of multiple lines.

34 / 38

Highlight with trailing `#<<`

An example of using the trailing comment #<< to highlight lines:

library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +   #<<
  geom_smooth()    #<<

Output:

library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +
  geom_smooth()

35 / 38

Selected xaringan documentation links

36 / 38

John Little

Data Analytics Librarian

Rfun host...

You can make Rfun with our resources for R and data science analytics. See the R we having fun yet‽ resource pages.

Duke University

Data & Visualization Services

https://library.duke.edu/data/
askData@Duke.edu
The /Edge, Bostock (1st Floor)
Past Workshops
Guides & Tutorials

37 / 38

Shareable

Data, presentation, and handouts

C bn

CC BY-NC license

38 / 38

xaringan -- dukeslides

/ʃæ.'riŋ.ɡæn/

Yihui Xie provides wonderful technical documentation and a wiki for the xaringan package. Some of his documentation is repeated here.

My goal is to present example slides with example R Markdown and xaringan syntax to demonstrate presentation styles.

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

xaringan template for Duke University

Combined CSS Styles

John Little

2023-03-16

xaringan -- dukeslides

/ʃæ.'riŋ.ɡæn/

NOTE

CSS styles

Get Started

Hello World

Making Bullets

Making Bullets

Knit

Rock Cairn Hiking

Two Column

inverse

h3

duke-softblue

duke-orange

duke-green

hygge-duke Two Column

Modifying text

Font sizes

Text color

Coloured content boxes

Coloured content boxes

CSS

CSS User-Contributed Themes

Figure Captions

More xaringan Documentation

xaringan

using xaringan

Math Expressions

R Plots

Tables

more HTML (kable) table

Kable HTML Documentation

HTML Widgets

Highlight Code

Highlight Code with * or {{}}

Highlight with trailing #<<

Selected xaringan documentation links

John Little

Data Analytics Librarian

Rfun host...

Duke University

Shareable

xaringan -- dukeslides

/ʃæ.'riŋ.ɡæn/

Help

Highlight Code with * or `{{}}`

Highlight with trailing `#<<`