Reveal.js 快速上手

简介

本文介绍 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 的 标签后的

的内容为：

<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
---

参考

1. Feature request: Export to single HTML
2. Using pandoc to produce reveal.js slides
3. need a way to specify output file
4. 前端工程师还学什么PPT，学reveal.js就够了！
5. Reveal.js HTML5炫酷幻灯片
6. reveal.js - 程序员的PPT制作神器