How to use revealjs to quickly write beautiful PPT

background

Daily work reports and speeches often require the production of PPT, generally using these standard tools Microsoft PowerPoint , Apple Keynote or Google Slides . But these tools are too cumbersome for me, I hope there is a simple and markdown support tool, luckily I found RevealJS , it is an open source HTML slideshow framework, making beautiful PPT, for web developers more preferred.

getting Started

reveal.js is built with nodejs, and nodejs needs to be installed in advance. Download start access http://localhost:8000 you can see a demo PPT.

 git clone [e-mail]:hakimel/reveal.js.git
mv reveal.js slides-demo
cd slides-demo
npm install
npm start

Use Vscode to open index.html to make, a section is a slide.

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

Each slide is linearly switched from left to right. If you need to transition vertically on the same page, you can nest section .

 <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                <section>
                        <p>这里有一些内容</p>
                        <section>1</section>
                        <section>2</section>
                        <section>2</section>
                </section>
            </div>
        </div>

Add data-background to add a background to the slideshow.

 <section data-background="https://blogs-on.oss-cn-beijing.aliyuncs.com/imgs/202206201857325.jpeg">
  <h2>来吧！展示</h2>
</section>

Added fragment to animate content, showing one content at a time. For example to render the list like this, just add a class="fragment" .

 <section>
  <h2>片段顺序</h2>
  <ul>
    <li class="fragment">第一个</li>
    <li class="fragment">第二个</li>
    <li class="fragment">最后一个</li>
  </ul>
</section>

Add pictures, create a assets directory in the project to store the pictures, and then import them.

 <section>
  <h2>插入</h2>
  <img src="assets/img.png" alt="img">
</section>

Reveal-md

Editing Html directly is troublesome, I am still used to editing content in markdown. Use reveal-md to convert markdown to Html, or export to PDF.

Install

 npm install -g reveal-md

There will be a permission error when installing npm 6.x version, you need to add --unsafe-perm=true

 sudo npm install -g reveal-md --unsafe-perm=true

--unsafe-perm=true: "false if running as root, true otherwise", which generally means the security restrictions of npm, the root context will not be queried when running as root, so you also need to specify --unsafe-perm when running sudo =true ignores this restriction.

Related commands

 # 启动
reveal-md slides.md -w 
# 生成 Html 默认目录_static
reveal-md slides.md --static
# 生成 Html 默认目录_static，指定图片目录 assets
reveal-md slides.md --static --static-dirs=assets
# 导出PDF
reveal-md slides.md --print slides.pdf
reveal-md slides.md --print slides.pdf --print-size 1024x768
reveal-md slides.md --print slides.pdf --print-size A4

slideshow theme

Default theme

name	Effect
black	Black background, white text, blue links (default)
white	White background, black text, blue link
league	Gray background, white text, blue link
beige	Beige background, dark text, brown links
sky	blue background, thin dark text, blue link
night	Black background, thick white text, orange links
serif	Cappuccino background, gray text, brown links
simple	White background, black text, blue link
solarized	high resolution photo
blood	Dark background, thick white text, red links
moon	high resolution photo

custom theme

1. Download reveal git clone [e-mail]:hakimel/reveal.js.git ;
2. Copy a file in /css/theme/coder.scss;
3. Run npm run build -- css-themes generate css dist/coder.css;
4. Run the specified topic reveal-md slides.md -w --theme theme/coder.css .

Animate when switching

name	Effect
none	Instantly switch backgrounds
fade	crossfade - default value for background transition
slide	Swipe between backgrounds— the default for slide transitions
convex	Slide with lobes
concave	swipe with a concave corner
zoom	Scales the incoming slide up so that it expands inward from the center of the screen

configure

We can configure it through yaml in the Markdown file

 title: Slides # 幻灯片名称
theme: solarized # 幻灯片主题
highlightTheme: github # 代码高亮主题
revealOptions: 
  transition: 'convex' # 动画效果

reveal other configuration items

 {
  // 显示控制箭头
  controls: true,
  // 循环播放
  loop: false
  // 更多参考 https://revealjs.com/config/
}

reveal-md other configuration items

 {
  // 幻灯片横行切割标志
  "separator": "^\n\n\n",
  // 幻灯片垂直切割标志
  "verticalSeparator": "^\n\n"
}

usage

When you need to add attributes to sections, Markdown is written as follows

 <!-- .slide: 属性=属性值 -->

When you need to insert attributes in other elements, Markdown is written as follows

 <!-- .element: 属性=属性值 -->

Some examples, set background color or background image

 <!-- .slide: data-background="#fff" -->
<!-- .slide: data-background="./bg.png" -->
<!-- .slide: data-background-image="https://xxx.jpg" data-background-opacity=.1 data-background-repeat="no-repeat" -->

set fragment

 - Item1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item2 <!-- .element: class="fragment fade-in-then-out" data-fragment-index="2" -->

Specify the highlighting order of the code

 ```js [1-2|3|4|5]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
c(2);
```

address jump

 <!-- .slide: id=0 -->
[跳转0](#/0)

Deploy to Netlify

I like to host some static html to netlify, it works better for free. First create a repository coder_slides on Github, and then create the following directory

 ├── README.md
└── content
    ├── assets
    │   └── bg.jpeg
    ├── template
    │   ├── listing.html
    │   └── reveal.html
    └── coder.md

• content put the MD file collection;
• assets local image resources;
• template is the rendered HTML template, including list page and detail page, which can be modified by yourself.

Default listing.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{pageTitle}}</title>
    <link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
  </head>

  <body>
    <ul>
      {{#files}}
      <li>
        <a href="{{filePath}}" title="{{title}}">
          {{#title}}{{.}} ({{filePath}}){{/title}}{{^title}}{{filePath}}{{/title}}
        </a>
      </li>
      {{/files}}
    </ul>
  </body>
</html>

Default reveal.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>{{{title}}}</title>
    {{#absoluteUrl}}
    <meta property="og:title" content="{{{title}}}" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="{{{absoluteUrl}}}/featured-slide.jpg" />
    <meta property="og:url" content="{{{absoluteUrl}}}" />
    {{/absoluteUrl}}
    <link rel="shortcut icon" href="{{{base}}}/favicon.ico" />
    <link rel="stylesheet" href="{{{base}}}/dist/reset.css" />
    <link rel="stylesheet" href="{{{base}}}/dist/reveal.css" />
    <link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
    <link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />

    {{#cssPaths}}
    <link rel="stylesheet" href="{{{.}}}" />
    {{/cssPaths}}

    {{#watch}}

    <script>
      document.write(
        '<script src="http://' +
          (location.host || 'localhost').split(':')[0] +
          ':35729/livereload.js?snipver=1"></' +
          'script>'
      );
    </script>
    {{/watch}}
  </head>
  <body>
    <div class="reveal">
      <div class="slides">{{{slides}}}</div>
    </div>

    <script src="{{{base}}}/dist/reveal.js"></script>

    <script src="{{{base}}}/plugin/markdown/markdown.js"></script>
    <script src="{{{base}}}/plugin/highlight/highlight.js"></script>
    <script src="{{{base}}}/plugin/zoom/zoom.js"></script>
    <script src="{{{base}}}/plugin/notes/notes.js"></script>
    <script src="{{{base}}}/plugin/math/math.js"></script>
    <script>
      function extend() {
        var target = {};
        for (var i = 0; i < arguments.length; i++) {
          var source = arguments[i];
          for (var key in source) {
            if (source.hasOwnProperty(key)) {
              target[key] = source[key];
            }
          }
        }
        return target;
      }

      // default options to init reveal.js
      var defaultOptions = {
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'default', // none/fade/slide/convex/concave/zoom
        plugins: [
          RevealMarkdown,
          RevealHighlight,
          RevealZoom,
          RevealNotes,
          RevealMath
        ]
      };

      // options from URL query string
      var queryOptions = Reveal().getQueryHash() || {};

      var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
    </script>

    {{#scriptPaths}}
    <script src="{{{.}}}"></script>
    {{/scriptPaths}}

    <script>
      Reveal.initialize(options);
    </script>
  </body>
</html>

run local debug

 reveal-md content/ --template template/reveal.html --listing-template template/listing.html

How to deploy deploy to netlify?

Register a netlify , then create a site associated with the github repository.

Add a build command to configure/deploy

 npm install -g reveal-md && reveal-md content/ --static --static-dirs=content/assets --template template/reveal.html --listing-template template/listing.html

Then add your own domain name in Domain Management

The configuration is successful as follows

https://slides.onlythinking.com

refer to

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

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

https://revealjs.com/

https://app.netlify.com/