reveal.js：构建程序员友好型的网页版 PPT

reveal.js^[1] 是一个 JavaScript 库，支持以网页的形式创建 PPT，支持 Markdown 格式，对程序员非常友好！

官网：https://revealjs.com/

快速开始

❝

不使用构架工具^[2]，直接网页中引入

❞

下载最新版 reveal.js 代码：https://github.com/hakimel/reveal.js/archive/master.zip^[3]
解压缩，index.html 中修改内容练习即可
浏览器打开 index.html 查看效果

如何使用

打开 index.html 就能看到最简单版本的 PPT 了。我们看下代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>reveal.js</title>

  <link rel="stylesheet" href="dist/reset.css">
  <link rel="stylesheet" href="dist/reveal.css">
  <link rel="stylesheet" href="dist/theme/black.css">

  <!-- Theme used for syntax highlighted code -->
  <link rel="stylesheet" href="plugin/highlight/monokai.css">
 </head>
 <body>
  <div class="reveal">
   <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
   </div>
  </div>

  <script src="dist/reveal.js"></script>
  <script src="plugin/notes/notes.js"></script>
  <script src="plugin/markdown/markdown.js"></script>
  <script src="plugin/highlight/highlight.js"></script>
  <script>
   // More info about initialization & config:
   // - https://revealjs.com/initialization/
   // - https://revealjs.com/config/
   Reveal.initialize({
    hash: true,

    // Learn about plugins: https://revealjs.com/plugins/
    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
  </script>
 </body>
</html>

首先看 PPT DOM 结构：

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

.reveal>.slides>section * n 的结构是固定的。一个 <section> 代表一个幻灯片，上例中有两个幻灯片。

如何初始化？加载 dist/reveal.js 文件后，通过全局变量 Reveal：


<head>
  <!-- ... -->
 <link rel="stylesheet" href="dist/reset.css">
 <link rel="stylesheet" href="dist/reveal.css">
 <link rel="stylesheet" href="dist/theme/black.css">
  <!-- ... -->
</head>
<script src="dist/reveal.js"></script>
<script>
  // More info about initialization & config:
  // - https://revealjs.com/initialization/
  // - https://revealjs.com/config/
  Reveal.initialize({
    hash: true,
  });
</script>

通过 Reveal.initialize() 方法初始化上述的 DOM 结构（不需要指定选择器 selector），接收选项参数 options，{ hash: true } 表示通过 hash 方式，记住当前处于哪个幻灯片位置，方便地址分享与恢复。

使用插件

reveal.js 脚本本身内置的功能并不多，如果要支持像 Markdown 语法、代码高亮、演讲者模式这些功能，需要通过插件提供。

<head>
  <!-- ... -->
 <!-- Theme used for syntax highlighted code -->
 <link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
  // More info about initialization & config:
  // - https://revealjs.com/initialization/
  // - https://revealjs.com/config/
  Reveal.initialize({
    hash: true,

    // Learn about plugins: https://revealjs.com/plugins/
    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
  });
</script>

插件是通过 Reveal.initialize() 方法的 options 参数的 plugins 参数提供的，是一个数组，接受一个插件列表。

上面我们加载了三个插件：

插件	插件对象	插件功能
`plugin/notes/notes.js`	RevealNotes	演讲者模式
`plugin/markdown/markdown.js`	RevealMarkdown	Markdown 语法支持
`plugin/highlight/highlight.js`	RevealHighlight	代码高亮支持（采用 monokai 风格）

功能介绍

Markdown 语法

我们需要将 Markdown 包含在 <textarea data-template> 元素内（注意，data-template attribute 是必须的），同时将 <textarea> 包含在 <section data-markdown> 中（注意，data-markdown attribute 是必须的）。

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](https://hakim.se "link").
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

这里的 <section> 可就同时包含多个幻灯片了。

更详细的内容参见：Markdown | reveal.js^[4]

代码高亮

<section data-markdown>
  <textarea data-template>
    ```js [1-2|3|4]
    let a = 1;
    let b = 2;
    let c = x => 1 + 2 + x;
    c(3);
    ```
  </textarea>
</section>

以上代码是在 Markdown 幻灯片中插入代码的方式。不过这段代码是支持高亮状态切换的，不同的高亮状态使用竖线 | 分隔，上述定义了 3 个高亮状态：

当我们第一次进入幻灯片时，会高亮第 1 到第 2 行代码，
切换，高亮第 3 行代码
切换，高亮第 4 行代码
切换，当前幻灯片结束

更详细的内容参见：Presenting Code | reveal.js^[5]

演讲者模式

<section data-markdown="example.md" data-separator="^nnn"
         data-separator-vertical="^nn" data-separator-notes="^Note:">
# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
</section>