reveal.js + markdown 制作幻灯片——逐条演示，演讲者注释，另存为pdf
幻灯片演示——逐条演示
关于逐步演示，在main.md文件中，通过data-fragment-index指定逐条演示的顺序，指定逐条演示的样式，例如<!-- .element: class="fragment fade-in" -->是指定内容开始不可见然后可见，默认为fade-in样式
### 逐条演示I
* 一 <!-- .element: class="fragment" data-fragment-index="1" -->
* 二 <!-- .element: class="fragment" data-fragment-index="2" -->
* 三 <!-- .element: class="fragment" data-fragment-index="3" -->
--
### 逐条演示II
* 一 <!-- .element: class="fragment fade-in" -->
* 二 <!-- .element: class="fragment highlight-red" -->
* 三 <!-- .element: class="fragment fade-out" -->
关于逐条演示的样式，官网给出的有
| Name | Effect |
|---|---|
| fade-out | Start visible, fade out |
| fade-up | Slide up while fading in |
| fade-down | Slide down while fading in |
| fade-left | Slide left while fading in |
| fade-right | Slide right while fading in |
| fade-in-then-out | Fades in, then out on the next step |
| fade-in-then-semi-out | Fades in, then to 50% on the next step |
| grow | Scale up |
| semi-fade-out | Fade out to 50% |
| shrink | Scale down |
| strike | Strike through |
| highlight-red | Turn text red |
| highlight-green | Turn text green |
| highlight-blue | Turn text blue |
| highlight-current-red | Turn text red, then back to original on next step |
| highlight-current-green | Turn text green, then back to original on next step |
| highlight-current-blue | Turn text blue, then back to original on next step |
演讲者注释
使用Markdown+reveal.js时，启用演讲者视图，需要在index.html中<body>中<div class="slides">后添加<section data-separator-notes="^Note:">
<body>
<div class="reveal">
<div class="slides">
<section data-markdown="main.md"
data-transition="convex"
data-separator="^\r?\n----\r?\n$"
data-separator-vertical="^\r?\n--\r?\n$"
data-separator-notes="^Note:"
data-charset="utf-8">
</section>
</div>
</div>
也就是在main.md中编辑时，通过关键字Note:+注释内容，并按S键启动演讲者视图
### 演讲者视图
如何添加幻灯片注释——**Note:**后添加注释的内容
S键打开演讲者视图
Note:
这里是注释
效果如下
保存为pdf
在幻灯片地址后面加字符串print-pdf，例如http://localhost:8000/?print-pdf
Ctrl+P打开浏览器打印对话框，选择另存为PDF，边距选择无，勾选背景图形
在另存为pdf时，演讲者注释也可一并导出，需要添加
Reveal.configure({ showNotes: true });
如果希望演讲者注释在单独页面上显示，则
Reveal.configure({ showNotes: 'separate-page' });
同样的，对于逐条演示的内容，导出为pdf时默认单独占一张幻灯片，这可以通过pdfSeparateFragments改变设置，false则将逐条演示的内容放在同一张幻灯片中
参考文献
[1] 官网