In desautm/xaringan: Presentation Ninja

options(htmltools.dir.version = FALSE)

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)

???

图片来源：Wikimedia Commons

---

class: center, middle

xaringan

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

---

class: inverse, center, middle

出发！

---

你好世界

首先从 Github 安装 xaringan 包：

if (!requireNamespace("xaringan"))
  devtools::install_github("yihui/xaringan")

--

除非你是六指琴魔，否则我建议安装 RStudio 编辑器，它会让你做幻灯片做得飞起。

• 从菜单 File -> New File -> R Markdown -> From Template -> Ninja Presentation (Simplified Chinese) 创建一个新文档；

--

• 点击 Knit 按钮编译文档；

--

• 或者点击 RStudio 插件^* “Infinite Moon Reader” 在 RStudio 里实时预览幻灯片（每次你保存文档的时候，它会自动重新编译）；

.footnote[[*] 如果你看不到模板或者插件，请参见 #2，你的某些 R 包可能崩坏了，需要重新安装。]

---

background-image: url(r xaringan:::karl) background-position: 50% 50% class: center, bottom, inverse

洛阳亲友如相问，请你不要告诉他

（我是怎么做幻灯片的）

---

你好忍者

忍者不会停留在“你好世界”里，要用好这个 R 包，你需要了解：

1. JavaScript 库 remark.js 的语法；

2. xaringan 包中的选项;

xaringan 将 R Markdown 的查克拉注入了 remark.js。浏览器中的幻灯片是 remark.js 渲染出来的，而它的 Markdown 源文档是从 R Markdown 生成的（实际上主要是 knitr）。

---

remark.js

关于 remark.js 的用法可参考它的首页，由于伟大的墙，你可能打不开这个页面（因为里面用了 Google 字体）。不过 remark.js 的维基页面 已经有足够的信息了，你需要学习：

• 如何创建一页新的片子，主要是 Markdown 语法^* 以及单页片子的属性设置；

• 如何排版，例如文本对齐；

• 如何设置整个幻灯片的选项（代码高亮样式之类的）；

• 怎样播放幻灯片（快捷键，按 h 键基本就知道了）；

.footnote[[*] 它和 Pandoc Markdown 语法不同，不过对做幻灯片而言，简单的语法可能也足够了。]

---

background-image: url(r xaringan:::karl) background-size: cover class: center, bottom, inverse

唔，remark.js，朕很满意！

---

class: inverse, middle, center

xaringan 包的使用

---

xaringan

xaringan 包提供了一个 R Markdown 输出格式 xaringan::moon_reader，你可以在 R Markdown 文档的元数据中使用它，例：

---
title: "啧啧啧，厉害啊"
author: "张三"
date: "2016年12月12日"
output:
  xaringan::moon_reader
    nature:
      autoplay: 30000
      highlightStyle: github
---

欲知所有可能的选项，参见 R 帮助文档 ?xaringan::moon_reader。

---

remark.js 与 xaringan 的区别

remark.js （左）与 xaringan （右）：

.pull-left[ 1. 需要一个 HTML 容器文件；

1. 只能用 Markdown；

2. 若想自动播放幻灯片需要写 JavaScript；

3. 需手工配置 MathJax；

4. 用 * 高亮一行代码；

5. 编辑 Markdown 之后需要刷新浏览器看结果； ]

.pull-right[ 1. 用 R Markdown 文档生成幻灯片；

1. Markdown 里可以嵌入 R 代码；

2. 可用 autoplay 选项自动播放；

3. MathJax 无需特别配置；^*

4. 用 {{}} 高亮一行代码;

5. 用 RStudio 插件“Infinite Moon Reader”自动预览幻灯片； ]

.footnote[[*] 下一页有数学公式例子。]

---

数学公式

数学公式用 LaTeX 语法写在一对美元符号中间，例如 $\alpha+\beta$ 会生成 $\alpha+\beta$。若要将公式单独显示为一个段落，可以用一对双重美元符号：

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

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

局限性：

1. 公式的源代码只能写在一行上，不能换行；双重美元符号内的公式允许换行，但条件是起始标记 $$ 必须在一行的最开头（前面不能有任何字符，后面必须跟一个不是空格的字符），结束标记 $$ 必须在一行的最末尾（前面必须是一个非空格的字符，后面不能有任何字符）；

2. 起始美元符号后以及结束美元符号前不能有空格，否则不会被识别为公式；

---

R 代码

# 一个无聊的回归模型
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読')
grep('天', dojutsu, value = TRUE)

---

R 图形

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

---

HTML 控件

我没有仔细测试 HTML 控件，祝你好运。下一页上有两个例子，一个地图，一个表格，目测貌似可用。

目前也不支持 Shiny 模式（即 runtime: shiny）。还是别把你的幻灯片搞辣么复杂吧。

---

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

---

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

---

一些小技能

• “Infinite Moon Reader”插件默认情况下会锁住你的 R 进程，有它没你，有你没它。你可以设置一个选项，让它一边儿凉快去：

  r options(servr.daemon = TRUE)

  你可以把这个设置写在 ~/.Rprofile 文件中，这样你将来所有 R 进程都不会被这个插件挡住去路。

  这事情背后的魔法在 servr 包中。

--

• 别忘了玩一下 yolo 选项，如：

  yaml output: xaringan::moon_reader: yolo: 3

  它会随机显示 Karl Broman 的照片；这里地方太小，写不下故事的来龙去脉。

---

一些小技能

• nature 下面的 autoplay 选项可以用来自动播放幻灯片，它的取值是毫秒，例如每 30 秒播放一张片子：

  yaml output: xaringan::moon_reader: nature: autoplay: 30000

--

• nature 下面的 countdown 选项可以为每一页幻灯片添加一个（倒数）计时器，取值同样为毫秒，例如每一页片子都用 60 秒倒计时：

  yaml output: xaringan::moon_reader: nature: countdown: 60000

---

一些小技能

• 一页片子可以分割成一步步播放，参见这个示例。

• 选项 highlightLines: true 可以让以 * 开头或者双重大括号 {{ }} 里面的代码被高亮出来；

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

  下一页我们举两个栗子。

---

一些小技能

.pull-left[ 以 * 开头的代码：

```r
if (TRUE) {
** message("敲黑板！划重点！")
}
```

输出：

if (TRUE) {
* message("敲黑板！划重点！")
}

因为它不是合法的 R 代码，所以不能作为 R 代码段来写，只能用三个反引号直接跟 r（就知道你没听懂）。 ]

.pull-right[ 用 {{}} 包裹的代码：

`r ''````r
if (TRUE) {
*{{ message("敲黑板！划重点！") }}
}
```

输出：

if (TRUE) {
{{ message("敲黑板！划重点！") }}
}

这是合法的 R 代码，所以你可以真的运行它。 ]

---

CSS（层叠样式表）

xaringan::moon_reader 的所有选项中，最强的魔法在 css 选项上，它是自定义幻灯片样式的关键。如果你不懂 CSS 的话，我强烈建议你学习一些 CSS 的基础知识。

对中文幻灯片，xaringan 包中的默认 CSS 文件在这里，你可以在它的基础上改装，也可以直接定义全新的 CSS 样式。

---

CSS（层叠样式表）

举个栗子。比如你想将一段文字的颜色改为红色，你可以定义一个 CSS 类，如：

.red {
  color: #FF0000;
}

我们把这段代码保存在一个 CSS 文件中，如 extra.css（假设它跟你的 R Markdown 文件在同一文件夹下），然后通过 css 选项将它引入：

output:
  xaringan::moon_reader:
    css: ["zh-CN.css", "extra.css"]

其中 zh-CN.css 是本包已经为你提供的 CSS 样式文件（你可选择用或不用）。

现在在 R Markdown 中你就可以用 .red[] 来标记一段文字为红色，如 .red[我是红色的]。

---

CSS（层叠样式表）

如果想在墙内用 Google 字体的话，可以试试这个 google-webfonts-helper 应用，它会把字体下载到本地并生成相应的 CSS 文件。也可以考虑 360 的 CDN 服务。

可惜中文不像英文，没有很新奇酷炫的网络字体，只能靠你电脑上的字体硬撑了。

---

class: inverse, middle, center background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/39/Naruto_Shiki_Fujin.svg) background-size: contain

火影忍者

---

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) background-size: 100px background-position: 90% 8%

写轮眼

xaringan 这个名字来源于火影中的写轮眼 Sharingan。¹ 写轮眼有两大能力：

• 洞察眼

• 催眠眼

其实做演示就是将自己的洞见传递给听众；好的演讲通常有催眠效果，因为它可以深度震撼人心。^2,3

.footnote[ [1] 我把 Sh 换成 X 了，因为几乎没有一个歪果仁读对过我的姓。当然主要原因还是 xaringan 搜索起来更容易被搜到。

[2] 糟糕的演讲也可以催眠听众，但显然这两种催眠完全不同。

[3] 我之所以选择了 remark.js 框架，就是因为它可以设置背景图。对我而言，在一页片子上整页显示一幅图最能表达震撼的视觉效果，现有的 R Markdown 幻灯片框架都缺乏这个功能，不开森。当时我发现 remark.js 之后真的是激动地不要不要的，等了一个月才抽出空来把这个包写出来。 ]

---

火影术语

简单介绍一下这个包里那些奇怪的术语的由来：

• 写轮眼（包名，已解释）

• 月读（我希望这个 R Markdown 格式 moon_reader 能将听众控制在幻象中）

• 查克拉（月读的参数之一 chakra，意思是 remark.js 的路径，它是支撑幻灯片的核心动力）

• 性质变化（月读的参数之一 nature，意思是通过设置选项改变查克拉的性质）

• 无限月读（函数 infinite_moon_reader() 开启一个服务器不断刷新更新后的幻灯片，RStudio 插件背后对应的就是这个函数）

• 通灵术（summon_remark() 从网络上把 remark.js 通灵到本地）

月读这个忍术有点邪恶，不过你就当不知道吧。

---

结印

使用本包单手就可以结印，按键 h 或者 ? 之后就可以看见所有结印手势，例如 p 进入演讲者模式（可看见写给自己的注释，比如提醒自己要讲的笑话），c 复制幻灯片到新窗口；演讲时可以在自己面前的屏幕上显示演讲者模式，把新窗口中正常的幻灯片拖到大屏幕投影上给观众看。

.center[]

???

嗯，我们来讲一个不容易看懂的冷笑话。

---

class: center, middle

蟹蟹

本幻灯片由 R 包 xaringan 生成；

查克拉来自于 remark.js、knitr、以及 R Markdown。

desautm/xaringan documentation built on May 28, 2019, 7:53 p.m.