Commit a08d8862 authored by David Carayon's avatar David Carayon
Browse files

new xaringan theme

parent 10f8418f
......@@ -241,6 +241,8 @@ Ce template est accessible via `File > New File > Rmarkdown > From Template`.
Le template Rmd est livré avec une feuille de style CSS correspondant aux couleurs INRAE, un fichier HTML permettant d'insérer le logo bloc-état sur chaque slide via du JavaScript et un logo INRAE blanc (issu de la charte graphique INRAE).
> Note : le style CSS est très largement inspiré du [thème développé par A. Bichat](https://github.com/abichat/defense/) pour sa soutenance de thèse.
L'utilisateur pourra choisir d'utiliser `chrome_print` au moment de la compilation pour obtenir un fichier PDF en plus de la sortie HTML.
Voici un exemple de présentation :
......
......@@ -320,6 +320,10 @@ aux couleurs INRAE, un fichier HTML permettant d’insérer le logo
bloc-état sur chaque slide via du JavaScript et un logo INRAE blanc
(issu de la charte graphique INRAE).
> Note : le style CSS est très largement inspiré du [thème développé par
> A. Bichat](https://github.com/abichat/defense/) pour sa soutenance de
> thèse.
L’utilisateur pourra choisir d’utiliser `chrome_print` au moment de la
compilation pour obtenir un fichier PDF en plus de la sortie HTML.
......
name: Présentation Powerpoint INRAE
name: Présentation éditable (Powerpoint)
description: >
Présentation Powerpoint aux couleurs INRAE
create_dir: FALSE
---
title: "Titre de la présentation"
subtitle: "Sous-titre"
author: "Auteur | Unité de recherche"
institute: ""
date: "Evenement | Janvier 2021"
subtitle: "Sous-Titre"
author: "Auteur"
institute: "Unité de recherche ..."
date: "`r Sys.Date()`"
output:
xaringan::moon_reader:
css: [styles/remark_inrae.css]
lib_dir: libs
chakra: https://remarkjs.com/downloads/remark-0.15.0.min.js
css: ["styles/remark_inrae.css", "styles/fonts_inrae.css"]
nature:
titleSlideClass: [middle, center]
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
ratio: "16:9"
includes:
after_body: styles/insert-logo.html
# Dé-commenter la ligne ci-dessous pour une sortie PDF
# knit: pagedown::chrome_print
ratio: "16:10"
slideNumberFormat: "%current% / %total%"
navigation:
scroll: false
knit: pagedown::chrome_print
---
layout: true
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
echo = FALSE,
message = FALSE,
warning = FALSE,
dpi = 300,
out.width = "80%",
dev.args=list(bg="transparent")
)
library(InraeThemes)
library(ggplot2)
library(gt)
```
class: center, middle
# xaringan
### /ʃaː.'riŋ.ɡan/
---
class: center, middle
class: inverse, center, middle
# Première section
# Get Started
---
# Hello World
Cette présentation a été construite à partir de **xaringan**, pouvant être consulté sur [Github](https://github.com/yihui/xaringan):
Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):
```{r eval=FALSE, tidy=FALSE, echo = TRUE}
```{r eval=FALSE, tidy=FALSE}
devtools::install_github("yihui/xaringan")
```
--
Une première phrase :
You are recommended to use the [RStudio IDE](https://www.rstudio.com/products/rstudio/), but you do not have to.
- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;<sup>1</sup>
--
- Première puce incrémentale
- Click the `Knit` button to compile it;
--
- Astuce : Prévisualisation en direct de la présentation via l'addin Rstudio "Infinite Moon Reader"[1]
- or use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>2</sup> "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.
.footnote[
[1] Note de bas de page
[1] 中文用户请看[这份教程](https://slides.yihui.org/xaringan/zh-CN.html)
[2] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
]
---
# Hello Ninja
As a presentation ninja, you certainly should not be satisfied by the "Hello World" example. You need to understand more about two things:
1. The [remark.js](https://remarkjs.com) library;
1. The **xaringan** package;
Basically **xaringan** injected the chakra of R Markdown (minus Pandoc) into **remark.js**. The slides are rendered by remark.js in the web browser, and the Markdown source needed by remark.js is generated from R Markdown (**knitr**).
---
# remark.js
You can see an introduction of remark.js from [its homepage](https://remarkjs.com). You should read the [remark.js Wiki](https://github.com/gnab/remark/wiki) at least once to know how to
- create a new slide (Markdown syntax<sup>*</sup> and slide properties);
- format a slide (e.g. text alignment);
- configure the slideshow;
- and use the presentation (keyboard shortcuts).
It is important to be familiar with remark.js before you can understand the options in **xaringan**.
.footnote[[*] It is different with Pandoc's Markdown! It is limited but should be enough for presentation purposes. Come on... You do not need a slide for the Table of Contents! Well, the Markdown support in remark.js [may be improved](https://github.com/gnab/remark/issues/142) in the future.]
---
background-image: url(`r xaringan:::karl`)
background-size: cover
class: center, bottom, inverse
# I was so happy to have discovered remark.js!
---
class: inverse, middle, center
# Using xaringan
---
# 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.
```yaml
---
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.
---
# remark.js vs xaringan
Some differences between using remark.js (left) and using **xaringan** (right):
.pull-left[
1. Start with a boilerplate HTML file;
1. Plain Markdown;
1. Write JavaScript to autoplay slides;
1. Manually configure MathJax;
1. Highlight code with `*`;
1. Edit Markdown source and refresh browser to see updated slides;
]
.pull-right[
1. Start with an R Markdown document;
1. R Markdown (can embed R/other code chunks);
1. Provide an option `autoplay`;
1. MathJax just works;<sup>*</sup>
1. Highlight code with `{{}}`;
1. The RStudio addin "Infinite Moon Reader" automatically refreshes slides on changes;
]
.footnote[[*] Not really. See next page.]
---
class: dark, center, middle
# Slide de section alternative
# Math Expressions
You can write LaTeX math expressions inside a pair of dollar signs, e.g. &#36;\alpha+\beta$ renders $\alpha+\beta$. 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}^nX_i$$
Limitations:
1. 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;
1. There should not be spaces after the opening `$` or before the closing `$`.
1. Math does not work on the title slide (see [#61](https://github.com/yihui/xaringan/issues/61) for a workaround).
---
# Diapositive avec graphique
# R Code
Ci-dessous un graphique avec un thème INRAE :
```{r comment='#'}
# a boring regression
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読')
grep('天', dojutsu, value = TRUE)
```
---
# R Plots
```{r cars, fig.height=4, dev='svg'}
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)
```
---
# Advanced plots
```{r example, message = FALSE, fig.width = 14, fig.height=8, dpi = 320, out.width = "90%", fig.align = "center", echo = FALSE}
library(InraeThemes)
library(ggplot2)
```{r example, message = FALSE, fig.width = 14, fig.height=8, dpi = 320, out.width = "70%", fig.align = "center"}
## On charge les données d'exemple du package
data("example_datasets")
......@@ -129,62 +259,320 @@ display <- list(
do.call(gridExtra::grid.arrange, display)
```
---
# Tables
If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,
```{r}
knitr::kable(head(iris), format = 'html')
```
---
# Some Tips
- Do not forget to try the `yolo` option of `xaringan::moon_reader`.
```yaml
output:
xaringan::moon_reader:
yolo: true
```
---
# Some Tips
- Slides can be automatically played if you set the `autoplay` option under `nature`, e.g. go to the next slide every 30 seconds in a lightning talk:
```yaml
output:
xaringan::moon_reader:
nature:
autoplay: 30000
```
- If you want to restart the play after it reaches the last slide, you may set the sub-option `loop` to TRUE, e.g.,
```yaml
output:
xaringan::moon_reader:
nature:
autoplay:
interval: 30000
loop: true
```
---
# Some Tips
- A countdown timer can be added to every page of the slides using the `countdown` option under `nature`, e.g. if you want to spend one minute on every page when you give the talk, you can set:
```yaml
output:
xaringan::moon_reader:
nature:
countdown: 60000
```
Then you will see a timer counting down from `01:00`, to `00:59`, `00:58`, ... When the time is out, the timer will continue but the time turns red.
---
# Some Tips
- The title slide is created automatically by **xaringan**, but it is just another remark.js slide added before your other slides.
The title slide is set to `class: center, middle, inverse, title-slide` by default. You can change the classes applied to the title slide with the `titleSlideClass` option of `nature` (`title-slide` is always applied).
```yaml
output:
xaringan::moon_reader:
nature:
titleSlideClass: [top, left, inverse]
```
--
- If you'd like to create your own title slide, disable **xaringan**'s title slide with the `seal = FALSE` option of `moon_reader`.
```yaml
output:
xaringan::moon_reader:
seal: false
```
---
# Equations
# Some Tips
> Bloc de citation
- There are several ways to build incremental slides. See [this presentation](https://slides.yihui.org/xaringan/incremental.html) for examples.
Les formules LaTeX peuvent être utilisés au sein d'un paragraphe : $E=mc^2$ ou en tant qu'équation sur une ligne seule :
- The option `highlightLines: true` of `nature` will highlight code lines that start with `*`, or are wrapped in `{{ }}`, or have trailing comments `#<<`;
```yaml
output:
xaringan::moon_reader:
nature:
highlightLines: true
```
$$f=\frac{a}{b+c}$$
See examples on the next page.
---
# Mise en page avancée
# Some Tips
.pull-left[
<img src="https://miro.medium.com/max/1200/1*ZVlIZ1ZYC6rASz-dYPzhZQ.jpeg" width=300 height=400>
An example using a leading `*`:
```r
if (TRUE) {
** message("Very important!")
}
```
Output:
```r
if (TRUE) {
* message("Very important!")
}
```
This is invalid R code, so it is a plain fenced code block that is not executed.
]
.pull-right[
<img src="https://pbs.twimg.com/media/EJ-maQOW4AAI16b?format=jpg&name=medium" width=300 height=400>
An example using `{{}}`:
````
`r ''````{r tidy=FALSE}
if (TRUE) {
*{{ message("Very important!") }}
}
```
````
Output:
```{r tidy=FALSE}
if (TRUE) {
{{ message("Very important!") }}
}
```
It is valid R code so you can run it. Note that `{{}}` can wrap an R expression of multiple lines.
]
---
# Diapositive avec un tableau
# Some Tips
An example of using the trailing comment `#<<` to highlight lines:
```{r gt}
iris %>%
head(8) %>%
gt() %>%
tab_header(title = "Exemple de tableau sur le jeu de données iris") %>%
tab_options(table.width = pct(100))
````markdown
`r ''````{r tidy=FALSE}
library(ggplot2)
ggplot(mtcars) +
aes(mpg, disp) +
geom_point() + #<<
geom_smooth() #<<
```
````
Output:
```{r tidy=FALSE, eval=FALSE}
library(ggplot2)
ggplot(mtcars) +
aes(mpg, disp) +
geom_point() + #<<
geom_smooth() #<<
```
---
# Avec affichage du code
# Some Tips
```{r echo = TRUE, out.width = "60%", fig.align="center", fig.width = 12, fig.height = 4}
When you enable line-highlighting, you can also use the chunk option `highlight.output` to highlight specific lines of the text output from a code chunk. For example, `highlight.output = TRUE` means highlighting all lines, and `highlight.output = c(1, 3)` means highlighting the first and third line.
# On charge un package
library(ggplot2)
````md
`r ''````{r, highlight.output=c(1, 3)}
head(iris)
```
````
ggplot(example_datasets$cars, aes_string(x = 'mpg', fill = 'cyl',
colour = 'cyl')) +
geom_density(alpha = 0.75) +
scale_fill_inrae() +
scale_color_inrae() +
labs(fill = 'Cylinders', colour = 'Cylinders', x = 'MPG', y = 'Density') +
theme_inrae()
```{r, highlight.output=c(1, 3), echo=FALSE}
head(iris)
```
Question: what does `highlight.output = c(TRUE, FALSE)` mean? (Hint: think about R's recycling of vectors)
---
# Some Tips
- To make slides work offline, you need to download a copy of remark.js in advance, because **xaringan** uses the online version by default (see the help page `?xaringan::moon_reader`).
- You can use `xaringan::summon_remark()` to download the latest or a specified version of remark.js. By default, it is downloaded to `libs/remark-latest.min.js`.
- Then change the `chakra` option in YAML to point to this file, e.g.
```yaml
output:
xaringan::moon_reader:
chakra: libs/remark-latest.min.js
```
- If you used Google fonts in slides (the default theme uses _Yanone Kaffeesatz_, _Droid Serif_, and _Source Code Pro_), they won't work offline unless you download or install them locally. The Heroku app [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts) can help you download fonts and generate the necessary CSS.
---
# Macros
- remark.js [allows users to define custom macros](https://github.com/yihui/xaringan/issues/80) (JS functions) that can be applied to Markdown text using the syntax `![:macroName arg1, arg2, ...]` or `![:macroName arg1, arg2, ...](this)`. For example, before remark.js initializes the slides, you can define a macro named `scale`:
```js
remark.macros.scale = function (percentage) {
var url = this;
return '<img src="' + url + '" style="width: ' + percentage + '" />';
};
```
Then the Markdown text
```markdown
![:scale 50%](image.jpg)
```
will be translated to
```html
<img src="image.jpg" style="width: 50%" />
```
---
# Macros (continued)
- To insert macros in **xaringan** slides, you can use the option `beforeInit` under the option `nature`, e.g.,
```yaml
output:
xaringan::moon_reader:
nature:
beforeInit: "macros.js"
```
You save your remark.js macros in the file `macros.js`.
- The `beforeInit` option can be used to insert arbitrary JS code before `remark.create()`. Inserting macros is just one of its possible applications.
---
# CSS
Among all options in `xaringan::moon_reader`, the most challenging but perhaps also the most rewarding one is `css`, because it allows you to customize the appearance of your slides using any CSS rules or hacks you know.
You can see the default CSS file [here](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default.css). You can completely replace it with your own CSS files, or define new rules to override the default. See the help page `?xaringan::moon_reader` for more information.
---
# CSS
For example, suppose you want to change the font for code from the default "Source Code Pro" to "Ubuntu Mono". You can create a CSS file named, say, `ubuntu-mono.css`:
```css
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
```
Then set the `css` option in the YAML metadata:
```yaml
output:
xaringan::moon_reader:
css: ["default", "ubuntu-mono.css"]
```
Here I assume `ubuntu-mono.css` is under the same directory as your Rmd.
See [yihui/xaringan#83](https://github.com/yihui/xaringan/issues/83) for an example of using the [Fira Code](https://github.com/tonsky/FiraCode) font, which supports ligatures in program code.
---
# Themes
Don't want to learn CSS? Okay, you can use some 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:
```{r, R.options=list(width = 70)}
names(xaringan:::list_css())
```
---
# Themes
To use a theme, you can specify the `css` option as an array of CSS filenames (without the `.css` extensions), e.g.,
```yaml
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]