cctg: 用 Reveal.js 製作 Slide

通常使用 reveal.js 會需要用 web server 將 js, css, html 放在上面，以便遠端存取這些資源，或是搭配 nodejs 使用。不過也可以將 GitHub - hakimel/reveal.js: The HTML Presentation Framework clone 下來，然後複製 dist 與 plugin 目錄的資料，就可以直接使用。

用 JS 製作 slide，有一些優點是 PowerPoint 沒有的，因為是 JS，所以可以做 code highlight，還有更彈性的動畫功能，可更正確地以 MathJS 顯示數學方程式，簡報也因為 script 化，size 會縮小很多，啟動也比較快。Reveal.js 以 plugin 的方式，提供外掛的功能。

內建有這些 plugin

Name	Description
RevealHighlight	Syntax highlighted code. plugin/highlight/highlight.js
RevealMarkdown	Write content using Markdown. plugin/markdown/markdown.js
RevealSearch	Press CTRL+Shift+F to search slide content. plugin/search/search.js
RevealNotes	Show a speaker view in a separate window. plugin/notes/notes.js
RevealMath	Render math equations. plugin/math/math.js
RevealZoom	Alt+click to zoom in on elements (CTRL+click in Linux). plugin/zoom/zoom.js

簡報的 theme 有: Black (default)、White、League、Sky、Beige、Simple Serif、Blood、Night、Moon、Solarized

這是兩頁簡單的投影片

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

        <title>slide</title>

        <link rel="stylesheet" href="dist/reset.css">
        <link rel="stylesheet" href="dist/reveal.css">
        <link rel="stylesheet" href="dist/theme/black.css">

        <!-- Theme used for syntax highlighted code -->
        <link rel="stylesheet" href="plugin/highlight/monokai.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>

        <script src="dist/reveal.js"></script>
        <script src="plugin/notes/notes.js"></script>
        <script src="plugin/markdown/markdown.js"></script>
        <script src="plugin/highlight/highlight.js"></script>
        <script>
            // More info about initialization & config:
            // - https://revealjs.com/initialization/
            // - https://revealjs.com/config/
            Reveal.initialize({
                hash: true,

                // Learn about plugins: https://revealjs.com/plugins/
                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
            });
        </script>
    </body>
</html>

如果不下載 reveal.js 的 repository，也可以使用 reveal.js - Libraries - cdnjs

去掉 library 及 css，投影片的部分為

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

initialization

library 初始化有以下這些設定值

<script>
      Reveal.initialize({
          // 參數設定[註1]
          controls: true, // 控制按鈕
          controlsTutorial: true, // 引導初學者功能
          controlsLayout: 'bottom-right', // 控制按鈕位置
          controlsBackArrows: 'faded', // 返回按鈕顯示方式
          progress: true, // 簡報進度條
          slideNumber: true, // 簡報當前頁碼
          history: false, // 所有動作儲存在歷史紀錄
          keyboard: true, // 鍵盤快捷鍵
          overview: true, // 簡報導覽模式
          center: true, // 簡報垂直置中
          touch: true, // 觸碰模式
          loop: false, // 循環模式
          rtl: false, // 簡報方向為RTL模式
          shuffle: false, // 簡報顯示順序為隨機模式
          autoPlayMedia: null, // 簡報內影音媒體為自動播放
          autoSlide: 0, // 自動切換的秒數，0秒代表不自動
          autoSlideStoppable: true, // 使用者在操作時停止自動切換
          autoSlideMethod: Reveal.navigateNext, // 自動切換觸發的函式
          mouseWheel: false, // 滑鼠滾輪可以切換簡報
          transition: 'slide', // 轉場動畫
          transitionSpeed: 'default', // 轉場速度
          backgroundTransition: 'fade', // 簡報背景的轉場動畫
          parallaxBackgroundImage: '', // 背景視差圖片
          parallaxBackgroundSize: '', // 背景視差圖片尺寸(單位: 像素)
          parallaxBackgroundHorizontal: null, // 水平背景視差，0為停止視差，null為自動計算(單位: 像素)
          parallaxBackgroundVertical: null // 垂直背景視差，0為停止視差，null為自動計算(單位: 像素)
      });
  </script>

Vertical Slide

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

Auto-Animate

切換頁面後，以動畫方式顯示投影片

<section data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>

Auto-Slide

自動播放投影片

// Slide every five seconds
Reveal.initialize({
  autoSlide: 5000,
  loop: true
});

Speaker View

showNotes 要設定為 true

<section>
  <h2>Some Slide</h2>

  <aside class="notes">
    Shhh, these are your private notes 📝
  </aside>
</section>

Slide Number

顯示簡報頁碼

Reveal.initialize({ slideNumber: true });

在 touch screen 是否能用滑動方式切換投影片

Reveal.initialize({
  touch: false
})

PDF Export

在簡報網址後面加上 ?print-pdf，可將簡報顯示為列印模式，然後就可以用 chrome 列印為 PDF

http://localhost:8000/?print-pdf

Overview Mode

在簡報中用 »ESC« or »O« 按鍵，可切換 Overview mode

Fullscreen Mode

在簡報中用 »F« 按鍵，可切換 Fullscreen

Example

一些簡報的範例

<div class="reveal">
<div class="slides">
    <section>
        <h1>Reveal.js Slide</h1>
        <p>簡報 demo</p>
    </section>
    <section>
        <h2>link</h2>
        <p>這是<a href="https://www.google.com/" target="_blank">測試連結</a></p>
    </section>
    <section>
        <h2>code highlight</h2>
        <pre><code class="hljs java" data-trim contenteditable data-line-numbers>
public class HelloWorld
{
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
        </code></pre>
    </section>

    <section data-markdown>
        <h2>markdown 的 math 聯立方程式</h2>
`$$ \begin{cases}
a_1x+b_1y+c_1z=d_1 \\
a_2x+b_2y+c_2z=d_2 \\
a_3x+b_3y+c_3z=d_3
\end{cases} $$`
    </section>

    <section>
        <h2>The Lorenz Equations</h2>
\[\begin{aligned}
  \dot{x} & = \sigma(y-x) \\
  \dot{y} & = \rho x - y - xz \\
  \dot{z} & = -\beta z + xy
  \end{aligned} \]
    </section>

    <section data-markdown>
        <textarea data-template>
        ## Slide 1
        A paragraph with some text and a [link](https://www.google.com).
        ---
        ## Slide 2
        ---
        ## Slide 3
        </textarea>
    </section>
</div>
</div>