编程

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

742 2024-01-08 04:40:00

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