reveal.js

发表于 | 阅读次数:

妈妈再也不用担心我的PPT了——PPT神器reveal.js

写PPT比写文档要麻烦一些，需要选择合适的模板，根据内容去调整模板，比如调整字号、间距、背景、动画…那么有没有一种工具可以让我们只专注于PPT的内容本身呢？当然有，答案就是reveal.js

演示

先给大家演示下效果

reveal.js是一个开源的PPT框架，可以帮助你自由地在浏览器生成功能强大且简洁直观的PPT。

它支持了很完整的PPT功能，如嵌套幻灯片、Markdown支持、自动设置动画、PDF导出、演讲者提示、LaTeX支持、代码高亮…

使用

安装

reveal.js有Basic Setup和Full Setup两种安装方式

推荐Full Setup安装(它支持所有功能，比如external Markdown)。

Full Setup的安装步骤如下：

  1. 安装Node.js (>=10.0.0)

  2. 克隆reveal.js仓库

1
git clone https://github.com/hakimel/reveal.js.git
  1. 安装dependencies
1
cd reveal.js && npm install
  1. 启动服务
1
npm start
  1. 打开 http://localhost:8000 就可以查看b并调试你的PPT了。

推荐使用markdown

我使用reveal.js制作过三次PPT。

第1次是在一个小游戏活动环节，使用html+js编写的内容，有随机选成语、倒计时等功能。由于reveal.js是使用前端技术实现的，所以你可以自由地设计一些游戏内容，这个优势是普通PPT所不具备的。

第2次是一次分享，采用html编写的内容。

最后一次还是分享，不过这次使用了markdown来编写内容。

通过第2次和第3次的使用经历，我觉得markdown是最方便的PPT制作方式。它不仅能让你完全专注于内容本身，并且这些内容就是一个个markdown文件，而不会像使用html那样会被一些标签割裂开来。使用markdown制作PPT，就和你写一份普通文档没有区别。

index.html

执行npm start后，打开 http://localhost:8000 就可以看到PPT的内容了。

PPT的所有内容都在根目录下的index.html文件中，你只需要在index.html中填写内容就可以了。每个section标签包裹的就是一页ppt的内容。至于PPT的呈现效果（样式），reveal.js内置的css样式文件里已经都给你实现好了，你不需要关心这个。当然，如果你想修改PPT的呈现效果，也是可以去修改它的css文件的。

选择主题

reveal.js内置了很多主题，满足不同喜好。

你只需要将index.html文件中的link标签的href属性换成相应主题即可。

1
<link rel="stylesheet" href="css/theme/league.css" />

使用markdown

要使用markdown，你需要在index.html中引入插件

1
2
<script src="plugin/markdown/marked.js"></script>
<script src="plugin/markdown/markdown.js"></script>

然后初始化一下

1
2
3
4
5
6
7
8
9
10
11
<script>
  Reveal.initialize({
    dependencies: [
      { src: "plugin/markdown/marked.js" },
      { src: "plugin/markdown/markdown.js" },
      { src: "plugin/notes/notes.js", async: true },
      { src: "plugin/highlight/highlight.js", async: true }
    ],
    hash: true
  });
</script>

这样你就可以编写markdown来制作PPT了。

它支持内联markdown

1
2
3
4
5
6
7
8
9
10
<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](http://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

也支持外部引入markdown

1
2
3
4
5
6
7
8
9
10
11
<div class="slides">
  <section data-markdown="sections/1.md"
    data-separator="^\n\n\n"
    data-separator-vertical="^\n\n"
    data-separator-notes="^Note:"
    data-charset="utf-8">
<!--
  Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
  For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
-->
  </section>
1
2
<!-- sections/1.md -->
## Chrome 插件开发

外部引入markdown这种方式可以让你的markdown内容更纯粹，不用和html标签混杂在一起，所以比较推荐这种方式。

PDF导出

如果我们想把PPT分享给别人，显然不能把一个前端工程发个他，所以reveal.js也支持PDF导出。

只需很简单的几步操作

  1. 访问 http://localhost:8000/?print-pdf
  2. 打开打印窗口(CTRL/CMD+P)
  3. 自定义一些配置项，点击保存即可

总结

以上介绍的内容大概能满足你的需要了，当然reveal.js还有很多强大的功能这里没有介绍，感兴趣的朋友可以查看官网

参考

0%