源起
希望把工作相关的东西都用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
------------------
![picture of spaghetti](images/spaghetti.jpg)
## 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了。
Demoppt.gif
方法详解
%符号作用
前三行的%的作用是告诉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页。
幻灯片缩略图.png
演讲模式
按下键盘“S”键,就进入演讲模式。(演讲模式我自己取的名,就是用PowerPoint的时候,演示人自己看到一个界面,内容丰富,有注释,还有下一页预览等,而给听众只看到普通的页面。)如果是双屏情况下,把普通页拓到投影那边即可。
演讲模式.png
更进一步
逐条显示条目
要让条目逐条显示,用下面的方式把条目包起来就可以了。
::: 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
目录下,是直接可以用的主题。
目录中每个.css文件就是一个主题。如果我们想生成一个simple主题,那么使用pandoc的 -V参数来指定主题即可。
pandoc demo.md -o demo.html -t revealjs -s -V theme=simple
现在ppt变成这样了:
simple主题ppt.PNG
不同的主题,看官自己去试吧。
其他未涉及
还有一些换背景,换转场效果等技能,我暂时没用到,也觉得不是核心特别要用的,请参考pandoc的文档吧。
网友评论