源起
希望把工作相关的东西都用git管理起来，对程序员来说，主要是三个东西：代码，文档，演示。用git管的话，这些东西需要都是基于纯文本的，代码已然是，文档用Markdown来写，抛弃word，剩下演示怎么弄，如何能抛弃PowerPoint？这篇文稿描述用Markdown来编写内容，然后用pandoc来生成基于reveal.js的网页ppt。好处很明显，让作者专注内容，写好的文档基于纯文本，可用git管理起来。
说明：reveal.js本身就可以支持Markdown，直接能制作网页PPT，而我们用pandoc的原因是，完全不用了解html的细节，对纯外行很适用。
基础工作
Markdown编辑器
推荐Typora，免费又好用，谁用谁知道。
安装pandoc
pandoc官网：http://pandoc.org/。官网有链接到github的下载地址，有各个系统的安装包，文档以Windows为例，下载...x86_64.msi文件，直接安装。
pandoc没有图形界面，安装好之后，用powershell，输入命令：pandoc -v，验证一下，能出来版本号等提示就表示安装成功了。
下载reveal.js
从github上下载：https://github.com/hakimel/reveal.js，不需要安装，下载下来是一个目录，目录名：“reveal.js”。
示例
1.首先用Markdown编写需要演示的PPT的内容。这里引用pandoc官方文档的示例，我们假设文件名取名为demo.md。
% Habits
% John Doe
% March 22, 2005
# In the morning
## Getting up
- Turn off alarm
- Get out of bed
## Breakfast
- Eat eggs
- Drink coffee
# In the evening
## Dinner
- Eat spaghetti
- Drink wine
------------------
## Going to sleep
- Get in bed
- Count sheep
2.用demo.md文件来生成用于演示的html。
pandoc -t revealjs -s demo.md -o demo.html
3.享受成果，查看生成的ppt。
这里需要注意，把生成的demo.html和下载下来的reveal.js放到同一个目录下，比如放到temp目录下：
temp
│ demo.html
│
└─reveal.js
用浏览器，推荐chrome来打开demo.html就看到生成好的网页PPT了。
image
方法详解
%符号作用
前三行的%的作用是告诉pandoc，这个Markdown文本要处理成幻灯片。前三行分别是：文档标题，作者，日期，会单独生成一页ppt作为全部ppt的起始页。
理解slide level
slide level（我姑且翻译成“滑动级别”）是理解幻灯片生成的重要概念，英文好的直接读pandoc帮助文档。根据帮助文档，我这样理解，Markdown文档里面，后面紧跟着正文内容的标题的级别（标题的级别就是1级标题、2级标题的级，也是HTML里面的h1、h2、……），就是这篇文档的“滑动级别”，产生的结果是：
- 与“滑动级别”同级的标题，会单独产生一页PPT，如果紧跟上一级标题，生成的PPT纵向滑动。
- 高于“滑动级别”的标题，会单独成一页只有标题的PPT，横向滑动。
- 低于“滑动级别”的标题，只会作为ppt的内容。
用我们的例子理解一下，紧跟正文内容的标题级别是2，那么这篇文档的slide level就是2。所有1级标题会单独产生一页只有标题的ppt，紧跟这个1级标题的每个2级标题及其正文内容，会单独产生单独的一页ppt，会在一级标题页之下，通过纵向滑动展示，而一级标题之间通过横向滑动来切换页。
帮助文档也提到可以在生成的时候，通过--slide-level 选项来指定“滑动级别”。实践中，你也可以用3级标题来写正文内容，2级标题来作为单独标题页，理解好“滑动级别”就可以灵活运用。
网页PPT常用操作
缩略图模式
演示ppt的时候，按键盘“esc”键，就可以出现所有ppt的缩略图，可以任意选择ppt页。
image
演讲模式
按下键盘“S”键，就进入演讲模式。（演讲模式我自己取的名，就是用PowerPoint的时候，演示人自己看到一个界面，内容丰富，有注释，还有下一页预览等，而给听众只看到普通的页面。）如果是双屏情况下，把普通页拓到投影那边即可。
image
更进一步
逐条显示条目
要让条目逐条显示，用下面的方式把条目包起来就可以了。
::: incremental
- Eat spaghetti
- Drink wine
:::
不逐条的：
::: nonincremental
- Eat spaghetti
- Drink wine
:::
同一页显示多列
:::::::::::::: {.columns}
::: {.column width="40%"}
contents...
:::
::: {.column width="60%"}
contents...
:::
::::::::::::::
演讲注释
演讲模式里面，演讲者的界面里，可以有注释信息，和PowerPoint的注释功能一样。实现方法：
::: notes
This is my note.
- It can contain Markdown
- like this list
:::
修改默认主题
前面我们使用命令pandoc demo.md -o demo.html -t revealjs -s来生成网页PPT，生成的网页PPT使用reveal.js的默认主题——黑色主题。如果我们对此不爽，reveal.js本身提供了很多主题供我们选择，可以查看reveal.js/css/theme目录下，是直接可以用的主题。
image
目录中每个.css文件就是一个主题。如果我们想生成一个simple主题，那么使用pandoc的 -V参数来指定主题即可。
pandoc demo.md -o demo.html -t revealjs -s -V theme=simple
现在ppt变成这样了：
image
不同的主题，看官自己去试吧。
其他未涉及
还有一些换背景，换转场效果等技能，我暂时没用到，也觉得不是核心特别要用的，请参考pandoc的文档吧。
作者：safeasy
链接：https://www.jianshu.com/p/9b71614f57b1
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论