reveal.js 是一个基于 HTML5 的演示文稿框架，可以用来创建美观、交互性强的幻灯片。借助 npm 包管理工具，我们可以方便地获取和使用 reveal.js。
安装 reveal.js
首先需要安装 Node.js 和 npm 包管理器。然后在命令行中执行以下命令：
--- ------- ---------
安装完成后，在项目目录下会生成 node_modules/reveal.js 目录，里面包含了 reveal.js 的所有文件。
创建幻灯片
在项目目录下创建一个 HTML 文件，引入 reveal.js 的 CSS 和 JavaScript 文件：
--------- -----
----- ----------
------
----- ----------------
--------- --------------------
----- ---------------- -----------------------------------------------
----- ---------------- ------------------------------------------------
----- ---------------- -----------------------------------------------------
-------
------
---- ---------------
---- ---------------
---------
--------- ------
------- -- --- ----- ----------
----------
---------
--------- ------
------- -- --- ------ ----------
----------
---------
--------- ------
------- -- --- ----- ----------
----------
------
------
------- -------------------------------------------------------
--------
--------------------
---------
-------
-------这个 HTML 文件包含了三个幻灯片，每个幻灯片都是一个 <section> 元素。在引入 reveal.js 的 JavaScript 文件后，执行 Reveal.initialize() 方法，就可以初始化幻灯片并显示出来。
编写幻灯片内容
reveal.js 支持使用 Markdown 语法编写幻灯片内容。只需要在 <section> 元素中添加 data-markdown 属性，并指定一个 Markdown 文件的路径，就可以自动将 Markdown 内容转换为 HTML 并显示出来：
-------- ------------------------- ------------------------ ----------------------
------- ---------------------
- ----- -
---- -- --- ----- ------
---
- ----- -
---- -- --- ------ ------
---
- ----- -
---- -- --- ----- ------
---------
----------上面的代码中，data-separator 和 data-vertical 属性用于指定 Markdown 文件中的分隔符和垂直分隔符。<script type="text/template"> 标签中的内容是 Markdown 文件的实际内容。
自定义幻灯片主题
reveal.js 内置了多个主题和 transition，可以根据需求进行选择。如果需要自定义主题，可以修改 CSS 文件或者创建新的 CSS 文件并引入。
例如，创建一个名为 my-theme.css 的文件，添加以下内容：
------- - ---------- ----- ------------ ---------- ------ ---------- ------ ----------- - ------- --- ------- --- ------- --- ------- --- ------- --- ------- -- - ------------ ----- - ------- -- - ---------- ----- -------------- ------ - ------- -- - ---------- ----- -------------- ------ - ------- - - ------------ ------ -------------- ------ -
然后在 HTML 文件中引入该 CSS 文件即可：
----- ---------------- ----------------------
总结
通过 npm 包管理工具，我们可以方便地获取和使用 reveal.js，创建美观、交互性强的幻
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32202