Reveal.js 快速上手

简介

本文介绍 Reveal.js (源码) 的基本概念和日常使用命令/方式/工作流。

这一工具可以制作出很好的展示 PPT,能充分利用 web 技术,不过笔者这里只将其作为一个快速制作可展示的单 html 文件的工具。

来自参考资料 6 的图了解一下效果:

来自参考资料 6 的图

环境

  • Unity 2018.2.5f1 Personal (64bit)

基本概念

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> 的内容为:

1
2
3
4
5
6
<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 示例

1
2
3
4
5
6
7
8
9
10
11
12
---
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 文件方便分享:

1
2
3
4
5
6
7
8
9
10
11
12
13
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 里面运行下面的命令:

1
2
3
4
5
# 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 分页使用 ----,注意前后都要是空行。

在文件开头提供元信息:

1
2
3
4
5
---
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制作神器