简介
本文介绍 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
---