今天给大家带来的是使用 Markdown 和 HTML 写逼格满满的 PPT 的正确姿势！

reveal-md

reveal-md 是使用 Markdown 来做 PPT 展示的开源项目，标星 2.1K 。

安装

  1. npm install -g reveal-md

使用

  1. reveal-md path/demo.md

其中，path/demo.md 是你的 Markdown 文件地址，可以使用本地地址，也可以使用 URL。
使用如下的 Markdown 文件 demo.md ：

  1. ## 前端GitHub
  2. * 大前端集合
  3. * GitHub 优秀开源项目推荐
  4. ---
  5. ## 内容
  6. > 专注于挖掘优秀的前端开源项目，抹平你的前端信息不对称。
  7. 涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！
  8. ---
  9. ## 前端资源合集
  10. * 收集、整理、推荐业界高品质前端资源合集
  11. * 优秀的工具、库、好的教程
  12. * 了解业界更优秀的代码、工具、业界最新的技术

在终端运行命令：reveal-md ./demo.md
效果如图：
程序员写逼格满满的 PPT 的正确姿势 - 图1

主题使用

包含的主题有以下几种：

  • beige
  • black
  • blood
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized
  • white

比如指定 league 主题使用：

  1. reveal-md path/demo.md --theme league

效果如图：
程序员写逼格满满的 PPT 的正确姿势 - 图2
还可以指定自己写的主题，也就是自己写的 css 样式，使用自定义主题后，会覆盖默认的主题。
比如自定义文件位于 ./theme/my-custom.css 中时，指定对应的路径即可。

  1. reveal-md slides.md --theme theme/my-custom.css

项目地址：

https://github.com/webpro/reveal-md

reveal.js

程序员写逼格满满的 PPT 的正确姿势 - 图3
这是一个基于 CSS 的 3D 幻灯片工具，标星 54K。
Reveal.js 做 PPT 的优点是可以使用 markdown 语言直接写静态的文本，并可以加入各种 html 语言支持的交互动画，然后由 Pandoc 直接转化成 PPT。
reveal.js 是一个开放源代码 HTML 表示框架。 它使使用 Web 浏览器的任何人都可以免费创建功能齐全且美观的演示文稿。
该框架具有广泛的功能，包括嵌套幻灯片，Markdown 支持，自动动画，PDF 导出，演讲者注释，LaTeX 支持，语法突出显示的代码等等。
reveal.js 有一下几个特点：

  • 支持标签来区分每一页幻灯片
  • 可以使用 markdown 来写内容
  • 支持 pdf 的导出
  • 支持演说注释
  • 提供 JavaScript API 来控制页面
  • 提供了多个默认主题和切换方式
  • 自适应移动端和 PC 端

    使用

    使用分为 基本使用、完整安装、npm 方式安装 3 种方式。

    基本使用

  1. 下载最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
  2. 解压缩并将 index.html 中的示例内容替换为您自己的内容
  3. 在浏览器中打开 index.html 进行查看

    完整安装

    安装：
    1. git clone https://github.com/hakimel/reveal.js.git
    1. cd reveal.js && npm install
    1. npm start
    打开 http://localhost:8000 查看您的演示文稿。

    npm 方式安装

    1. npm install reveal.js
    2. # or
    3. yarn add reveal.js
    直接导入使用
    1. import Reveal from 'reveal.js';
    2. import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
    3. let deck = new Reveal({
    4. plugins: [ Markdown ]
    5. })
    6. deck.initialize();
    还需要添加 reveal.js 样式 和 主题.
    1. <link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
    2. <link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">

    使用

    幻灯片的内容需要包含在 <div class="reveal"> <div class="slides"> 的标签中。
    一个 section 是一页幻灯片。当 section 包含在 section 中时，是一个纵向的幻灯片。
    怎么理解呢？ 可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。
    For example:
    1. <div class="reveal">
    2.  <div class="slides">
    3.      <section>Single Horizontal Slide</section>
    4.      <section>
    5.          <section>Vertical Slide 1</section>
    6.          <section>Vertical Slide 2</section>
    7.      </section>
    8.  </div>
    9. </div>

    html 实现

    标题和正文
    section 中的内容就是幻灯片的内容，你可以使用 h2 标签标示 title，p 表示内容。需要红色的字体可以直接设置 style 的 color 为 red。
    当某一页需要特殊背景色，可以使用 data-background 在 section 上设置, data-background-transition 表示背景的过渡效果。
    For example:
    1. <section data-background-transition="zoom" data-background="#dddddd">
    如果需要正文一段一段出现。可以使用 fragment。
    For Example:
    1. <p class="fragment"></p>
    代码
    reveal.js 使用 highlight.js 来支持代码高亮。可以直接写 code 标签来实现, data-trim 表示去除多余的空格。
    For Example:
    1. <pre><code data-trim>
    2. console.log('hello reveal.js!');
    3. </code></pre>
    注释
    在演说时，会用到注释，对于注释，可以通过 <aside class="notes"> 来实现。
    For Example:
    1. <aside class="notes">
    2. 这里是注释。
    3. </aside>
    在幻灯片页面，按下 s 键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。

    markdown 实现

    reveal.js 不仅支持 html 表示来实现内容， 还可以通过 markdown 来实现内容。使用 markdown 实现内容时，需要对 section 标示添加 data-markdown 属性，然后将 markdown 内容写到一个 text/template 脚本中。
    For Example:
    1. <section data-markdown>
    2.  <script type="text/template">
    3.      ## Page title
    4.      A paragraph with some text and a [link](http://hakim.se).
    5.  </script>
    6. </section>
    7. 背景色，fragment功能的实现，可以通过注释来实现。For Example:
    8. <section data-markdown>
    9.  <script type="text/template">
    10.  <!-- .slide: data-background="#ff0000" -->
    11.      - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
    12.      - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
    13.  </script>
    14. </section>
    外置 md 文件
    reveal.js 可以引用一个外置的 markdown 文件来解析。
    For Example:
    1. <section data-markdown="example.md"  
    2.       data-separator="^\n\n\n"  
    3.       data-separator-vertical="^\n\n"  
    4.       data-separator-notes="^Note:"  
    5.       data-charset="iso-8859-15">
    6. </section>
    分页实现
    一个 markdown 文件中可以连续包含多个章内容。可以在 section 中 通过属性 data-separator, data-separator-vertical 来划分章节。
    For Example:
    1. <section data-separator="---" data-separator-vertical="--"  >
    2. <script type="text/template">
    3.  # 主题1
    4.  - 主题1-内容1
    5.  - 主题1-内容2
    6.  --
    7.  ## 主题1-内容1
    8.  内容1-细节1
    9.  --
    10.  ## 主题1-内容2
    11.  内容1-细节2
    12.  ---
    13.  # 主题2
    14. </script>
    15. </section>
    注释
    对 section 添加 data-separator-notes="^Note:" 属性，就可以指定 Note: 后面的内容为当前幻灯片的注释。
    For Example:
    1. # Title
    2. ## Sub-title
    3. Here is some content...
    4. Note:
    5. This will only display in the notes window.

    导出 PDF

  • 在浏览器打开文件的 url 上添加 print-pdf 即可以，比如： http://localhost:8000/demo.html/?print-pdf，你可以测试一下官方的 revealjs.com/demo?print-pdf
  • 打开浏览器的保存为 pdf 的弹框，快捷键为：CTRL/CMD + P
  • 边距设置为 无
  • 勾上背景图形
  • 点击 保存 即可

程序员写逼格满满的 PPT 的正确姿势 - 图4

多主题

reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的 css 文件。

总结

用 reveal.js 来实现幻灯片，可以只关注内容，忽略各种切换效果。
而且可以使用 markdown 来实现，大大提高了编写效率。对于最后生成的 html 文件，可以部署到服务器，这样只需要网络就可以进行分享，不需要使用 U 盘拷来拷去了。

https://github.com/hakimel/reveal.js