用網頁製作你的簡報:reveal.js

用網頁製作你的簡報:reveal.js

試著想像一個情境,你是一名工程師,需要跟他人分享你的創意,你希望雙方認知建立在相同的基礎上,當說到「狗」時,聽眾明白你指的是拉不拉多,而不是吉娃娃。投影片是個簡單有效的同步工具,但 Windows 的 PowerPoint 有幾個惱人的問題:

  • 僅具備簡單畫面編輯工具
  • 版型固定
  • 沒有 Quote
  • 沒有 Code Section
  • 沒有 Syntax Highlight

投影片應該要像攝影機,講者使用它來專注說故事。而 PowerPoint 設計的目標,是讓不具備程式能力的人,也能將畫面放上電腦。它有基礎的視覺設計能力,但並不足以應付進階應用。

reveal.js 是以 HTML 為基礎的簡報框架,藉由 CSS 跟 HTML 分離,講者可以更專注在內容,將設計交由第三方庫來處理。由於本質上是由 HTML、CSS 跟 JavaScript 組成,reveal.js 可以成為網站,只要使用者能上網,就能進行播放。本文會用 reveal.js 來設計簡報,嘗試體驗它的魅力。

需要 Clone 程式碼的,可以到這裡

Install reveal.js

依照官方說明,reveal.js 有三個安裝方式

We provide three different ways to install reveal.js depending on your use case and technical experience.

The basic setup is the easiest way to get started. No need to set up any build tools.

The full setup gives you access to the build tools needed to make changes to the reveal.js source code. It includes a web server which is required if you want to load external Markdown files (the basic setup paired with your own choice of local web server works too).

If you want to use reveal.js as a dependency in your project, you can install from npm.

JavaScript 是手稿語言,下載檔案等同完成安裝。對普通使用者來說,Basic Setup 已經夠用,習慣使用 Git 的人,也可以 Clone 整個專案,再依照自己的需求修改。

我會建議將 reveal.js 的檔案複製到自己的專案,結構如下

revealjs
├── dist
├── plugin
├── index.html
├── package.json
└── README.md

dist 跟 plugin 是 reveal.js 的資源,可以看成是程式主體,在執行時會引用。index.html 是投影片本體。在 reveal.js 的設計中,使用者只需要修改 index.html,其他的事會由 reveal.js 的庫來處理。

Establish HTTP Server

reveal.js 可以用瀏覽器開啟,但如果想將簡報變成網站,還是需要 http server 來提供服務。我們用 node.js 來建立 server,在專案目錄下新增啟動腳本 index.js

revealjs
├── dist
├── plugin
├── index.html
├── index.js
├── package.json
└── README.md

內容是

const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");

// setting user-defined type
const mimeTypes = {
  html: "text/html",
  jpeg: "image/jpeg",
  jpg: "image/jpg",
  png: "image/png",
  js: "text/javascript",
  css: "text/css",
  mp4: "video/mp4",
  woff: "text/woff",
};

// create http server
var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname;
  var fileName = path.join(process.cwd(), unescape(uri));
  var stats;

  // check if the file is enter
  try {
    stats = fs.lstatSync(fileName);
  } catch (e) {
    res.writeHead(404, { "Content-type": "text/plain" });
    res.write("404 Not Found!\n");
    res.end();
    return;
  }

  // get the file type to check is html type
  if (stats.isFile()) {
    var mineType = mimeTypes[path.extname(fileName).split(".").reverse()[0]];
    res.writeHead(200, { "Content-type": mineType });
    var fileStream = fs.createReadStream(fileName);
    fileStream.pipe(res);
  } else {
    res.writeHead(500, { "Content-type": "text/plain" });
    res.write("500 Internal Error\n");
    res.end();
  }
});
server.listen(8888);

一行一行看。

簡報檔內可能包含不同的媒體,像是 HTML、CSS、JS,用 mimeTypes 來告知客戶端報文類別

const mimeTypes = {
  html: "text/html",
  jpeg: "image/jpeg",
  jpg: "image/jpg",
  png: "image/png",
  js: "text/javascript",
  css: "text/css",
  mp4: "video/mp4",
  woff: "text/woff",
};

建立 http server,並解析客戶端輸入的 URL,每個 URL 可看成對應到不同的檔案,伺服器收到 URL 的要求後,會將檔案回給客戶端

var server = http.createServer(function (req, res) {
  var uri = url.parse(req.url).pathname;
  var fileName = path.join(process.cwd(), unescape(uri));
  var stats;

如果檔案不在,回覆 404 Not Found

  //check if the file is enter
  try {
    stats = fs.lstatSync(fileName);
  } catch (e) {
    res.writeHead(404, { "Content-type": "text/plain" });
    res.write("404 Not Found!\n");
    res.end();
    return;
  }

如果檔案存在,回覆 200,報文是檔案內容

  //get the file type to check is html type
  if (stats.isFile()) {
    var mineType = mimeTypes[path.extname(fileName).split(".").reverse()[0]];
    res.writeHead(200, { "Content-type": mineType });
    var fileStream = fs.createReadStream(fileName);
    fileStream.pipe(res);
  } else {
    res.writeHead(500, { "Content-type": "text/plain" });
    res.write("500 Internal Error\n");
    res.end();
  }

監聽 Port 8888,用 8888 來提供服務

server.listen(8888);

執行

node index.js

伺服器就開好了。

First Page and Vertical Slides

有伺服器後,來建立投影片。如前面講的,投影片本體是 index.html,修改它

<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <a href="[https://nodejs.org/en/](https://nodejs.org/en/)">
                    <img src="[.](https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg).." class="demo-logo" />
                </a>
                <p>reveal.js ...</p>
            </section>

修改處是 body 內的 tag section,每個 tag section 可以當成一頁投影片。在上方程式碼中,section 內加入了一則連結 <a>;一張圖片 <img>;還有一段文字 <p>

啟動瀏覽器,輸入 hostname:port/index.html,看到投影片

右下角箭頭代表可以向右翻頁。

reveal.js 除單純向右翻頁外,也支援向下翻頁,讓使用者能用二維的角度,來聚合他要講的內容。只要在 section 中再加入 section,就有 vertical page 的效果

<section>
  <section>
    <h2>Vertical Slides</h2>
    <p>We can use vertical slides.</p>
    <br />
    <a href="#" class="navigate-down">
      <img class="r-frame" ... alt="Down arrow" />
    </a>
  </section>
  <section>
    <h2>Vertical Slides</h2>
    <p>This is page 2.</p>
    <br />
    <a href="#" class="navigate-up">
      <img class="r-frame" style="... alt="Up arrow" />
    </a>
  </section>
</section>

加入兩頁 vertical page,效果是

右下角顯示能向上或向下翻頁。

Syntax Highlight and Background

工程師常需要跟他人講解程式碼,因此少不了語法凸顯,reveal.js 支援語法凸顯的寫法是

<section data-auto-animate>
    <h2>Pretty Code</h2>
    <pre><code class="hljs" data-trim data-line-numbers>
      import React, { useState } from 'react';
      function Example() {
        const [count, setCount] = useState(0);
        return (
          ...
        );
      }
    </code></pre>
    <p>Code syntax highlighting courtesy of highlight.js.</p>
</section>

hljs 是跟 Syntax Highlight 相關的 style,data-line-numbers 用於顯示行號。效果是

這絕對是 PowerPoint 辦不到的事情。

當然,也可以修改背景

<section data-background="[kazetachinu003.jpg](http://www.ghibli.jp/gallery/kazetachinu003.jpg)">
    <div style="
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 20px;
    ">
    <h2>Image</h2>
    </div>
</section>

用 data-background 來設定背景,用 div 建立區塊來放置文字,區塊的背景顏色是黑色,透明度 70%。效果是

是不是簡單大方!

小結

除前面提到的功能外,reveal.js 還有許多功能,可以自行挖掘。reveal.js 不僅支援 Chrome、Firefox 等主流瀏覽器,還支援 RWD,更可以進行各種細微調整,如果需要特殊動畫,只需要引入相關的 JavaScript 函式庫即可。對開發者來講,它不像 PowerPoint 是面向終端的產品,而是將工具交由開發者,由開發者自行配置需要的效果。

我認為對商務簡報來講,因為有保存與傳播資訊的需求,可能還是要使用 PowerPoint 之類的傳統工具;但在技術簡報的情境裡,reveal.js 等 HTML 簡報框架能賦予開發者更大的自由,具備更好的使用者體驗。

Reference

Read more

Weekly Issue 第 3 期:Cloudflare 宣布內容獨立日

最近用了很多 Cloudflare 的產品,像是 Zero Trust、WARP,還有 Cloudflare Tunnel。每次的體驗都讓我嘖嘖稱奇,好像它們預判了我的需求一樣。這家公司始終追求著「更好的網路」這個目標,內容付費又是另一個例子。 🗞️ 熱門新聞 Content Independence Day: no AI crawl without compensation! 賽博佛陀 Cloudflare 又來普渡眾生了。這次是針對 AI 爬蟲收費。 「網路正在改變。它的商業模式也將改變。在這個過程中,我們有機會從過去 30 年網路的優點中學習,並為未來的網路創造更好的環境。 」 Cloudflare 真的很有意思,連思考的角度都很有趣。 內容當然是有價的,只是價格會怎麼支付呢?在現代的內容創作,這題變得非常複雜。 Folklore.org: Joining Apple Computer

By Ken Chen

Weekly Issue 第 2 期:Linux 基金會啟動 FAIR 專案

有些產品看到會覺得行不通,有些產品則相反,只要聽到就覺得是個好主意。Sentry 的產品通常都是後者。我猜有部分,也是因為它們的產品都指向同一個使命:可除錯性。 🗞️ 熱門新聞 Linux Foundation Announces the FAIR Package Manager Project for Open Source Content Management System Stability Linux 基金會啟動 FAIR 專案,為 WordPress 外掛程式提供替代方案。 底下的 Supporting Quotes 可以看看,講話都很客氣,左一句「去中心化」右一句「透明的治理架構」,在講什麼大家都很清楚 😜 。 Uber 與 Airbnb 重塑 VC 玩法,一文看懂 a16z 創辦人

By Ken Chen

Weekly Issue 第 1 期:Stack Overflow 流量大跌

來自阮一峰老師的靈感與嘗試,我會在 Weekly Issue 中記錄每周值得分享的科技內容,周一發刊。多數內容都有刊在我的 X、Threads 或 Facebook 中,你可以追蹤上述社群媒體得到最新消息。這裡的性質更接近單周回顧與歷史歸檔。 🗞️ 熱門新聞 The Pulse #134: Stack overflow is almost dead StackOverflow 的情況比我想的還糟,退化到剛成立三個月的狀況?太要命了。 我自己好奇的是 2020 年的衰退如何引起?平台治理的問題嗎? Cloudflare service outage June 12, 2025 Cloudflare 近幾次中斷事故都有出報告,內容包括背景跟時間軸,還有改善方式,這是很正確也很重要的實踐。 我也曾經遇過幾次重要的服務停機事件,當時都會盡可能擠出時間即時更新 + 出報告。後來服務也的確越來越穩。這種問題很多都是文化層面的問題。 Ask HN: How

By Ken Chen