简介
本文介绍 Reveal.js (源码) 的基本概念和日常使用命令/方式/工作流。
这一工具可以制作出很好的展示 PPT，能充分利用 web 技术，不过笔者这里只将其作为一个快速制作可展示的单 html 文件的工具。
来自参考资料 6 的图了解一下效果：
环境
- Windows 10
基本概念
Reveal.js 是一款 HTML5 演示框架。它将 markdown 文件转换为可以放映的 html5 文件，也可导出 pdf（网页打印功能）。
工作流
安装
下载地址：https://github.com/hakimel/reveal.js/releases
例如：https://github.com/hakimel/reveal.js/archive/3.7.0.zip
第一次使用
解压 reveal.js-3.7.0 修改其中的 index.html 的 <body> 标签后的 <div class="reveal"></div> 的内容为：
<div class="slides">
<section data-markdown="slides.md"
data-separator="^\n---- ----\n$"
data-separator-vertical="^\n----\n$">
</section>
</div>
然后在 index.html 所在文件夹新建 slides.md 文件，这个文件就是 ppt 的内容了。
slides.md 示例
---
author: John Doe
title: Demo Slide
date: June 21, 2017
---
# Foo
print("hello world")
# Bar
* test
* test
提示
如果是直接打开 index.html 而不是通过单文件命令转换或者开服务器，则会提示：
Failed to get the Markdown file slides.md. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load ‘file:///D:/tmp/reveal.js-3.7.0/slides.md’.
单文件转换
把 reveal.js 相关文件转换成一个独立的 html 文件方便分享：
pandoc -s -t revealjs -o slides-reveal.html slides.md -V revealjs-url=.
# 可用主题
# https://github.com/jgm/pandoc/wiki/Using-pandoc-to-produce-reveal.js-slides#themes
# -V theme=solarized
pandoc -s -t revealjs -o slides-reveal.html slides.md -V revealjs-url=. -V theme=solarized
npm install -g inliner
inliner --nocompress --inlinemin -e utf-8 slides-reveal.html > dist.html
# powershell
# 注意：目前 inliner 的这个命令要在 cmd 中用，如果用 powershell，编码会乱掉。即使下面这样写也不行：
inliner --nocompress --inlinemin -e utf-8 slides-reveal.html | out-file dist.html -encoding utf8
日常使用
解压一份 reveal.js 源码，然后在 reveal.js 文件夹下写 slides.md
在 cmd 里面运行下面的命令：
# md->html
pandoc -s -t revealjs -o slides-reveal.html slides.md -V revealjs-url=. -V theme=solarized
# 把依赖都压到一个 html 中
inliner --nocompress --inlinemin -e utf-8 slides-reveal.html > dist.html
取出 dist.html 使用即可，它可以独立放到任意位置播放（包括其他电脑上）。
写作格式
使用 markdown 语法即可。ppt 分页使用 ----，注意前后都要是空行。
在文件开头提供元信息：
---
author: John Doe
title: Demo Slide
date: June 21, 2017
---
扫一扫
1700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
