幻灯忍者

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 编辑器,它会让你做幻灯片做得飞起。

--

--

.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 的维基页面 已经有足够的信息了,你需要学习:

.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)
)

一些小技能

--


一些小技能

--


一些小技能


一些小技能

.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 这个名字来源于火影中的写轮眼 Sharingan1 写轮眼有两大能力:

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

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

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

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


火影术语

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

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


结印

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

.center[]

???

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


class: center, middle

蟹蟹

本幻灯片由 R 包 xaringan 生成;

查克拉来自于 remark.jsknitr、以及 R Markdown



Try the xaringan package in your browser

Any scripts or data that you put into this service are public.

xaringan documentation built on Feb. 20, 2018, 1:02 a.m.