reveal.js 是一個使用網頁製作簡報的 HTML5 架構，讓您隨時隨地上網即可播放簡報。

製作簡報大家通常都會使用 Office 的 PowerPoint，而現在您有另外一種選擇，就是使用網頁來製作簡報，reveal.js 是一個專門用來製作高品質網頁簡報的 HTML5 架構，使用它來製作的簡報非常漂亮，功能也很強大，品質不會輸 PowerPoint，而且完全免費，

若使用 reveal.js 製作簡報，只要將簡報網頁放在網路上，不管是 Windows、Mac OS X、Linux 的系統，甚至各種手機，只要是可以看網頁的設備都可以直接打開簡報觀看；如果放在自己的電腦或是隨身碟中，也可以像一般簡報檔一樣撥放，使用上很彈性。

基本簡報

以下是使用 reveal.js 製作簡報的步驟教學。

Step 1

從 reveal.js 的 GitHub 網站上下載最新的 reveal.js zip 壓縮檔，並解壓縮。

Step 2

解壓縮之後，可以看到一個 reveal.js-master 目錄，這個目錄中有非常多的檔案，其中有很多是專案開發者才會使用到的，如果只是拿來製作簡報的一般使用者，只會需要 css、js、lib 與 plugin 這四個目錄，我們可以另外新建一個製作自己簡報用的目錄，把以上這四個目錄複製過來，就可以開始製作簡報了。

reveal-js-presentation-html5-framework-1

Step 3

使用 reveal.js 製作的簡報事實上就是一張普通的網頁，以下是一個三頁的簡報範例，第一頁是封面，第二頁是簡單的文字超連結，而第三頁我放了一段 C++ 的程式碼。請將這個範例儲存成 demo.html，放進剛剛新建的目錄中：

<!doctype html>
<html lang=lang="zh-TW">
<head>
  <meta charset="utf-8">
  <title>Reveal.js 簡報示範</title>
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/beige.css" id="theme">

  <!-- Code syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">

  <!--Add support for earlier versions of Internet Explorer -->
  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <!-- 使用 reveal 與 slides 的 div 將整個簡報包起來 -->
  <div class="reveal">
    <div class="slides">

      <!-- 簡報內容開始 -->

      <!-- 一個 section 表示一頁簡報 -->
      <section>
        <h1>G.T.Wang</h1>
        <p>這是 G.T.Wang 的示範簡報</p>
      </section>

      <!-- 第二頁簡報 -->
      <section id="show-a-link">
        <h2>連結示範</h2>
        <p>這是一個<a href="http://blog.gtwang.org/">測試連結</a></p>
      </section>

      <!-- 第三頁簡報 -->
      <section>
        <h2>這是程式碼</h2>
        <pre><code class="hljs cpp" data-trim contenteditable>
#include &lt;iostream&gt;
#define IABS(x) ((x) &lt; 0 ? -(x) : (x))

int main(int argc, char *argv[]) {

  /* An annoying &quot;Hello World&quot; example */
  for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; &quot;Hello, World!&quot; &lt;&lt; endl;

  return -2e3 + 12l;
}
        </code></pre>
      </section>

      <!-- 簡報內容結束 -->

      </div>
  </div>
  <script src="lib/js/head.min.js"></script>
  <script src="js/reveal.js"></script>

  <script>
    // 啟用 reveal.js
    Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: true,

      transition: 'slide', // none/fade/slide/convex/concave/zoom

      // 加入一些 reveal.js 的外掛
      dependencies: [
        { src: 'plugin/highlight/highlight.js',
          async: true, condition: function() {
            return !!document.querySelector( 'pre code' );
          }, callback: function() {
            hljs.initHighlightingOnLoad();
          }
        }
      ]
    });
  </script>
</body>
</html>

每一個 <section> 代表一頁，我們可以使用一般的 HTML/CSS/JavaScript 語法撰寫簡報內容，第三頁的程式碼我們是靠 highlight.js 這個外掛工具，讓程式碼依據程式的語法顯示顏色。

transition 這個參數可以設定簡報換頁的特效，可以使用的選項有 none、fade、slide、convex、concave 與 zoom。

css/theme/beige.css 是簡報的佈景主題 CSS 檔，我們可以自己更換，可用的佈景主題 CSS 檔可以從 css/theme 這個目錄中瀏覽。

接著用瀏覽器打開這個網頁黨，就可以看到製作出來的簡報：

簡報第一頁

簡報中的超連結

簡報中的程式碼

在報告當中若要快速切換頁面，可以按下鍵盤的 Esc 健，顯示簡報的縮圖，這樣就可以快速瀏覽並且選擇簡報頁面。

簡報縮圖

使用 Markdown 語法

如果不喜歡 HTML 的一大堆標籤，reveal.js 也可以使用 Markdown 的語法來編寫簡報，首先加上 Markdown 的外掛：

dependencies: [ {
  src: 'plugin/markdown/marked.js',
  condition: function() {
    return !!document.querySelector( '[data-markdown]' );
  }
}, {
  src: 'plugin/markdown/markdown.js',
  condition: function() {
    return !!document.querySelector( '[data-markdown]' );
  }
} ]

接就可以使用 Markdown 的語法了：

<section data-markdown>
  <script type="text/template">
    ## 使用 Markdown 語法

    用 Markdown 寫簡報更簡單！

    語法教學請參考 [Markdown 文件](http://markdown.tw/).
  </script>
</section>

這樣寫起簡報來會更簡潔，製作出來的簡報畫面一樣很漂亮：

reveal-js-presentation-html5-framework-6

分段顯示

分段顯示是簡報上常用的呈現方式，讓簡報一開始不要顯示全部的內容，讓內容隨著講者的陳述依序顯示出來，以下是一個範例。

<section>
  <h2>分段顯示</h2>
  <p>請繼續...</p>
  <p class="fragment">... 顯示 ...</p>
  <p>
    <span class="fragment">下一個 ...</span>
    <span class="fragment">項目</span>
  </p>
</section>

這樣簡報的內容就可以隨的講者的控制依序出現：

reveal-js-presentation-html5-framework-7

圖形與表格

圖形與表格的加入就跟一般的網頁一樣，只要使用普通的 HTML 語法即可。這是加入圖形的範例：

<section>
  <h2>圖形</h2>
  <img data-src="gtwang-logo.png" />
</section>

加入圖形的簡報畫面：

reveal-js-presentation-html5-framework-8

這是加入表格的範例：

<section>
  <h2>表格</h2>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Value</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apples</td>
        <td>$1</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Lemonade</td>
        <td>$2</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Bread</td>
        <td>$3</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</section>

加入表格的簡報畫面：

reveal-js-presentation-html5-framework-9

以上是 reveal.js 基本的介紹，其實它的功能還不只如此，詳細的說明可以參考 reveal.js 的 GitHub 網頁。