--- title: 一款新的 R Markdown 幻灯片制作工具:xaringan date: '2017-02-13T13:17:47+00:00' author: 边蓓蕾 categories: - 推荐文章 - 统计之都 - 统计软件 tags: - 幻灯片 - R Markdown - Markdown - HTML5 - xaringan - remark.js slug: xaringan-presentation meta_extra: "审校:郎大为;编辑:彭晨昱" forum_id: 419184 --- 今天小编给大家介绍一款新的幻灯片神器:xaringan(中文名:幻灯忍者)。它基于大家都熟悉的 R Markdown 语法,幻灯片中能嵌入 R 代码动态生成输出结果,最后生成的是 HTML5 幻灯片,可以在网页浏览器里打开阅览,我们一起来探个究竟吧。对了,官方教程在这里:。 在此声明一下本文适宜读者群:R码农,熟悉markdown语法,懂点前端的你们。当然如果以上你都不太熟悉但又有着求知欲,希望本文将是你成为幻灯忍者的起点。 ![](https://cloud.githubusercontent.com/assets/163582/25060238/2975308c-215e-11e7-8afd-2e9200d7afe3.png) # 出发! 首先,从 GitHub 上安装此包的开发版本(建议用 RStudio IDE),或者直接从 CRAN 安装也行。 ```r devtools::install_github("yihui/xaringan") ``` 下面会以一个进阶的过程给大家讲解。 # 下忍篇 请进行如下操作: * 点击菜单 `File -> New File -> R Markdown -> From Template -> Ninja Presentation (Simplified Chinese)`创建一个新文档。 ![](https://uploads.cosx.org/2017/02/fig1.png) * 点击 Knit 进行编译 ![](https://uploads.cosx.org/2017/02/fig2.png) 此时你会看见一个默认模版,改改就可以开张了!在此之前,你需要了解一些基本魔法: ## 魔法一:Markdown基本语法 * 用三个短横线来开始一页新的幻灯片,可以用一个井号开始写标题(标题不是必须元素) ```markdown # 引言 这是第一张片子 --- # PPT狗子们看过来 这是第二张片子 ``` * 可以用两个短横线分割当前页面,两短横线下面的内容会被接续上面的内容生成在下一页上,比如你有一个三个项目的列表,中间用两短横线分割,最后出来的效果就是先显示第一项,翻下一页继续显示下一项 # 忍者等级 - 上忍 -- - 中忍 -- - 下忍 * 可以用三个问号添加片子的注释,注释不会直接显示在幻灯片中,而是在演讲者模式中才会出现(键盘上按p键) ```markdown # 影 只有五大国所属忍者村的首领才可以拥有的称号(动画原创剧情中增加了星影),是“村子中最伟大的忍者”。 ??? 五影的称号分别是:火影、风影、水影、土影、雷影。 ``` 若你不了解 Markdown 语法,可以用 RStudio 菜单 Help -> Markdown Quick Reference打开一个参考页面。 ## 魔法二:片子属性的设置 片子的最开头,你会看到有 key-value(键-值对)格式的写法,这就是片子的属性。 * class 类属性用来设置 CSS 类,可用来调整片子里面文字的位置 ```markdown class: center, middle # 请水平垂直居中我 ``` * background-image 最后再介绍一个比较吸引人的自定义背景功能。你可以选择自己喜欢的图片(本地图片或网络图片)。 ```markdown background-image: url(chakra.svg) # 查克拉 ``` 更多属性设置参见: ## 魔法三:插入数学公式 一般情况下依旧是 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$$` ## 魔法四:插入R代码及R图形 * R代码 ```{r comment='#'} # 一个无聊的回归模型 fit = lm(dist ~ 1 + speed, data = cars) coef(summary(fit)) dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読') grep('天', dojutsu, value = TRUE) ``` * R图形 ```{r cars, fig.height=3.5, dev='svg'} par(mar = c(4, 4, 1, .1)) plot(cars, pch = 19, col = 'darkgray', las = 1) abline(fit, lwd = 2) ``` # 中忍篇 在以上四种魔法的基础上,可以再吃两颗兵粮丸。(设置幻灯片的各种行为) ## 丸子一:YAML^[这也是一种标记语言,经常用来写一些配置]头文件设置整个幻灯片的选项 * 定义输出格式:`xaringan::moon_reader` * CSS 样式:如果你比较熟悉 CSS ,不妨在外部自定义一个 CSS 文件,以`css: ['extra.css']`的形式引入。如果完全没听过css,请百度各种菜鸟教程,或者去了解一下W3C组织,同时恭喜你入坑。 * nature下面设置 autoplay 选项,片子每隔一段时间自动播放,单位毫秒 * 如果不想让无限月读锁死 R 进程,请设置: ```r options(servr.daemon = TRUE) ``` * 累了还可以玩玩yolo大法 该选项默认的图片是 Karl Broman 的大头照。如果`yaml yolo: 3`你的幻灯片中将随机出现3次他的大头照,如果`yaml yolo: 0.3`你的幻灯片中将有30%的片子是他的大头照。当然你也可以把默认图片换掉。 * …… 欲知所有可能的选项,请在console中输入`?xaringan::moon_reader` ## 丸子二:幻灯片的播放 * 请按下h键一键查看帮助 * 按下 p 键进入播放模式,此时你会看到计时器以及之前三个问号为你留下的注释,可谓演讲者的好工具! # 上忍篇 嗯,其实,有人想知道这个包是怎么来的嘛!如果你还有一颗好奇心,请坚持,它很宝贵。 remark.js 是一个用来做幻灯片的 JavaScript 库,好处是能随时随地在不同设备的浏览器里浏览,用的是简单的 Markdown 语法,如果你熟悉 HTML,CSS 还能把片子做的特酷炫,播放也是杠杠的……我们来创建一个片子。参考: ```html Title ``` 好,就把这些复制上吧,在浏览器里打开该文件,你就看到了3张片子。 ![](https://uploads.cosx.org/2017/02/fig3.png) 不熟悉 HTML 和 CSS 基本语法的可能需要补补(这里用到的不难~)你会看到``标签里裹了个`