结合html做界面_[贰技巧派] 用一种更自由的方式做Slides

如果用营销号起标题的方式应该是：90%的人都不知道的做PPT的方法

1. 前言

对于我们90年前后的这一代人而言，从最初接触电脑开始，就一直都受到微软产品的极大影响，从Windows操作系统到Office办公全家桶，以至于使用电脑的习惯就有很浓重的微软风格，这里面就包括日常工作和学习中必不可少的幻灯片(演示文档)，我们甚至更爱称呼为PPT，但是实际PPT只是Office产品中PowerPoint文档的扩展名，我们却用PPT指代了一切演示文稿，可见微软对我们的影响有多大，不过老外似乎更习惯称作Slides。

幻灯片的演示方式其实是在电脑出现之前存在了，比如我们可以在一些纪录片中看到的利用投影仪播放投影卡片的场景。将幻灯片与电脑结合这件事是一个叫Robert Gaskins的美国人干的，他也是PowerPoint发明者，后来才被微软收购。

到现在，可以制作演示文稿的软件就十分丰富了，微软的PowerPoint，苹果的Keynote，谷歌的Slides。但是，由于Mac在国内的市场占有率远低于Windows，而谷歌服务由于众所周知的原因我们也无法使用，所以奠定了微软PowerPoint的霸主地位。

PowerPoint的优点就是特别好用，入门难度极低，不过缺点也是有时候特别不好用。一是03版和10以后版本的兼容问题，排版和字体会乱掉，当然解决办法就是另存为PDF格式，保存为PDF也是一个特别好的习惯；二是使用PowerPoint做演示文稿的时候需要花费很多的精力在版式设计上，比如字体大小、文本框位置等等；三是对于绝大部分人，对于演示文稿的需求其实很基本，不需要转场动画，也不需要特效，比如科研民工，越简单越好，有时候甚至连学校给的模版都不想用。

如果你也是和我一样对于演示文稿的需求比较基本的，那么也许一种用html做PPT的方式值得尝试。推荐两个已经被开发者封装好了的应用xaringan和Markdown Preview Enhanced，两个的开发者都是国人。这两个包和插件都是基于流行的JavaScript应用框架的，前者是remark.js，后者是reveal.js。xaringan是R语言的专用包， MarkdownPreview是Atom和Visual Studio Code的插件。

这两个应用都是可以很方便的利用 Markdown语法和 CSS语法转化成slides，一直觉得Markdown应该是现在特别值得去使用的一种文本书写方式，应该它真的很易学又很好用。

2. 安装

1)xaringan

一种是从GitHub安装，当然需要提前安装devtools包

devtools::install_github("yihui/xaringan")

另一种是从CRAN安装，应该是可以的，因为我看见目前已经在CRAN上发布了

install.packages("xaringan")

2)Markdown Preview Enhanced

需要先安装Atom或者Visual Studio Code，两个都是特别流行的IDE，直接在软件中的应用市场中搜索就可以了，开发者是Yiyi Wang，最新版本是0.5.1。

3. 使用

因为xaringan使用比较简单，如果结合Rstudio就更容易了，因为它的开发者yihui xie就在Rstudio任职，看一遍tutorial就能够使用了。

因为我用最近一直在用python，所以就经常使用visual studio code，用的比较多的就是Markdown Preview Enhanced(MPE)了，其实这两个应用的方法和使用大同小异，都可以使用markdown语法直接转换，MPE的作者说明说得很详细了。不过目前还有些小bug，比如播放计时无法使用。

下面就用visual studio code来演示，主要写点作者文档中未提及的

• 第一步：文件 - 新建文件 - 然后保存，后缀名设置成.md就可以了。

• 第二步：设置Yaml，presentation，其实不设置也可以，只是不再是slides了，是html页面，上面操作完就是下面的样子了，这里推荐把embedded的参数设置成true，这样最后导出的就是将图片整合在一起的一个html文件了，方便分享。

  

• 第三步：在页面中右键，就会出现Markdown Preview Enhanced: Open Preview to the Slide的选项，点击，然后就会是下面的样子

  

• 第四步：就是用markdown的语法书写内容就可以了，其中就是用来分页的，这个下面的内容就会出现在slides的同一个页面下，如果想加演示模式下的提示内容，可以有两种方式：

• One method to add speaker notes.

• 或者：

• # How## Today is a good day.I want to go home

• 第五步：导出，直接在预览界面上，右键，就会出现导出选择，html是可以直接导出，offline是本地使用，cdn hosted是用来在网站上部署的，如果需要导出成PDF，需要单独安装princexml即可，或者将hmtl打印成PDF也可以。如果是html就是下面这个样子

  

• 第六步：播放，直接在html打开后，按键盘的 F键就可以了，如果想成提示模式，就按 S键，就会出现另外一个单独的页面，如下，然后再结合投影设置成扩展屏幕模式，就可以将提示的页面放在自己电脑上，演示页面放在投影上，两个页面会同步变化，只是目前计时器还有点bug。

  还有一些按键可以去探索，比较有意思

  

• 最后，如果想要修改，字体大小、字体样式、背景颜色等等，可以在visual code里按 ctrl+shift+p，搜索Markdown Preview Enhanced: Customize CSS，打开后就是下面这个样子，就可以用CSS的语法进行自定义样式

  

4. 结尾

除了上面提到的timer那个bug外，还有一个就是code在presentation下是无法正常运行的，但是把yaml的内容删除，做成单纯的html页面是可以正常运行的，因此，这个插件不仅可以做slides，还可以用来写嵌入式report，而且在正文中也支持CSS语法，可以说自定义的空间很大了。

用这种方式做Slide的好处是，只需要进行一次模版的设定，自定义一个自己喜欢的样式，后面就可以专注于文稿内容，不需要进行很多版式的设计。

--------------------------------------------------------------------------------

公众号好像不太容易设置外部超链接，原本文章中是有设置了链接的，统一放在下面：

xaringan的安装地址 【https://cran.r-project.org/web/packages/xaringan/index.html】 xaringan作者说明 【https://slides.yihui.org/xaringan/#1】 MPE的安装地址 【 https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced】 MPE作者说明 【https://shd101wyy.github.io/markdown-preview-enhanced/#/】 Markdown语法教程 【https://segmentfault.com/markdown/】