reveal.js — 一个开源 HTML 幻灯片框架

reveal.js 是一个开源的 HTML 幻灯片框架，可以简单的理解为网页版的 PPT。它是一个工具，使任何拥有网络浏览器的人都可以免费创建功能齐全、美观的演示文稿。

使用 reveal.js 进行的演示稿(PPT)基于开放式 web 技术。这意味着任何事情你可以在 web 上做的事，也可以在你的演示稿中实现。使用 CSS 更改样式，使用 <iframe>引入外部网页，或使用 reveal.js 的 JavaScript API 添加自定义行为。

该框架具有广泛的功能，包括嵌套幻灯片、Markdown 支持、自动动画、PDF 导出、speaker notes、LaTeX 支持和高亮代码语法。

优势

和传统的 PPT 相比，reveal.js 有哪些吸引我的地方呢？主要有：

• 界面优美：UI 风格简介优美，对数学公式、代码、多媒体扩展支持。
• 运行简单：因为是一个 HTML 文件，那么只要双击，就能在浏览器中展示。也可以通过 url 分享。
• 功能强大：因为是在浏览器中运行的，可以用 HTML + CSS + JS，做各种想要的东西：比如与现场的用户进行交互(如用户在手机上进行一些投票，页面上实时显示投票数)；并且，reveal.js 有多套默认皮肤，支持多种 PPT 切换动画，Fragments，内联 PPT( nested slides)，代码高亮，解析 Markdown，懒加载图片和视屏，导出为 PDF 和一系列的 JS API 等特性

安装

基础安装

基本设置是最广泛使用的入门方式，只需要您有一个网络浏览器。不需要经过构建过程或安装任何依赖项。

1. 下载最新版本的 reveal.js：https://github.com/hakimel/reveal.js/archive/master.zip
2. 使用自己的内容替换 index.html 中的示例内容
3. 在浏览器中国打开 index.html 查看

就这样 🚀

完整安装 — 推荐使用

reveal.js 的一些功能，如外部 Markdown，需要从本地 web 服务器上运行演示稿。以下说明将设置这样一个服务器以及编辑 reveal.js 源代码所需的所有开发任务。

1. 安装 Node.js（10.0.0或更高版本）

2. 克隆 reveal.js 存储库

$ git clone https://github.com/hakimel/reveal.js.git

3. 进入 reveal.js 文件夹并安装依赖项

$ cd reveal.js && npm install

4. 启动服务并监视源文件的更改

npm start

5. 打开 http://localhost:8000 查看你的演示

开发服务器端口

默认开发服务器端口为 8000。你可以使用 port 参数切换：

npm start -- --port=8001

从 npm 安装

该框架发布到 npm，并且可以从 npm 安装。请注意，reveal.js 是针对浏览器的，包括 CSS、字体和其他资源，因此 npm 依赖性用例可能有限。

npm install reveal.js
# or
yarn add reveal.js

安装完后，你可以将 reveal.js 作为 ES 模块引入:

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();

你也需要引入 reveal.js 样式及演示稿主题。

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