reveal.js：构建程序员友好型的网页版 PPT
本文发布于 2023.05.16
以网页的形式创建 PPT，支持 Markdown 格式，对程序员非常友好！
官网：https://revealjs.com/
快速开始
注意：不使用构架工具，直接网页中引入
下载最新版 reveal.js 代码：https://github.com/hakimel/reveal.js/archive/master.zip
解压缩，index.html 中修改内容练习即可
浏览器打开 index.html 查看效果
如何使用
打开 index.html 就能看到最简单版本的 PPT 了。我们看下代码：
首先看 PPT DOM 结构：
.reveal>.slides>section * n 的结构是固定的。一个 <section> 代表一个幻灯片，上例中有两个幻灯片。
如何初始化？加载 dist/reveal.js 文件后，通过全局变量 Reveal：
通过 Reveal.initialize() 方法初始化上述的 DOM 结构（不需要指定选择器 selector），接收选项参数 options，{ hash: true, } 表示通过 hash 的形式，记住当前处于哪个幻灯片位置，方便地址分享与恢复。
使用插件
reveal.js 脚本本身内置的功能并不多，如果要支持像 Markdown 语法、代码高亮、演讲者模式这些功能，需要通过插件提供。
插件是通过 Reveal.initialize() 方法的 options 参数的 plugins 参数提供的，是一个数组，接受一个插件列表。
上面我们加载了三个插件：
功能介绍
Markdown 语法
我们需要将 Markdown 包含在 <textarea data-template> 元素内（注意，data-template attribute 是必须的），同时将 <textarea> 包含在 <section data-markdown> 中（注意，data-markdown attribute 是必须的）。
这里的 section 可就同时包含多个幻灯片了。
更详细的内容参见：https://revealjs.com/markdown/
代码高亮
以上代码是在 Markdown 幻灯片中插入代码的方式。不过这段代码是支持高亮状态切换的，不同的高亮状态使用竖线 | 分隔，上述定义了 3 个高亮状态：
当我们第一次进入幻灯片时，会高亮第 1 到第 2 行代码，
切换，高亮第 3 行代码
切换，高亮第 4 行代码
切换，当前幻灯片结束
更详细的内容参见：https://revealjs.com/code/
演讲者模式
以上是在 Markdown 中增加演讲者注释内容的方式，通过 data-separator-notes attribute 来指定，我们这里将Note: 开头的部分，作为注释内容。
更详细的内容参见：https://revealjs.com/speaker-view/
