使用reveal.js

安装reveal.js

1. 前往reveal.js下载至本地
2. 拷贝dist、plugin、index.html文件。打开index.html文件，如图所示：

更换主题

通过修改引入的theme css文件修改主题

<link rel="stylesheet" href="dist/theme/serif.css">

theme可选择主题查看dist/theme目录下文件

编辑reveal.js

参考官方文档开始编辑自己的PPT吧，首先搭出大致框架.reveal -> .slides -> section

<div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
</div>

Vertical Slides垂直页添加

官方参考代码

<section>Horizontal Slide</section>
<section>
  <section>Vertical Slide 1</section>
  <section>Vertical Slide 2</section>
</section>

效果如图

Slide Number显示页码

在配置中添加slideNumber

<script>
   // More info about initialization & config:
   // - https://revealjs.com/initialization/
   // - https://revealjs.com/config/
   Reveal.initialize({
      hash: true,
      // 显示页码
      slideNumber: true,
      // Learn about plugins: https://revealjs.com/plugins/
      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
</script>

效果如图

Overview Mode纵观全局

按键ESC或O查看该视图 效果如图

Fullscreen Mode全屏

按键F

使用Markdown

在section标签上添加data-markdown属性，使用<textarea/>标签包裹Markdown内容

<section data-markdown>
    <textarea data-template>
        # 标题
    </textarea>
</section>

效果如图