about 4 years ago

上次我們介紹怎麼用 Markdown 完成一本書, 這次我們來看 Markdown 可不可以做簡報。用 Markdown 做簡報, 其實就是輸出成 HTML, 用網頁做簡報。為什麼我們要選這個方案, 不用 PowerPoint, Keynote, LaTeX (Beamer) 等等方式呢? 對我來說, 有幾個很棒的因素:

  • 通常比其他方案簡潔、快速
  • 基本上就是個網頁, 所以像影像啦, GIF 動畫等等啦, 都是「本來就會」的。
  • 用 Markdown 做很快速, 可以專注在內容上。

Reveal.js

於是, 我們要找個支援 Markdown (其實到最後這個反而不是必要) 的網頁簡報系統。今天我們介紹個還挺有名氣的

reveal.js

這網頁進去就是 Reveal.js 的樣子哦, 是不是看來很簡潔、高雅。我們要下載, 基本上就是要去他的 GitHub 站。如果對 GitHub 不熟, 反正就整個 zip 檔下載下來。

自然, 你知道 Fork, Clone 是什麼的, 也不需要我在這裡廢話了。

** 之後每個簡報, 基本上就是這一整個 folder**。雖然這也不是全部必要, 但我不準備花時間去說明哪些要哪些不要。我們要做的基本上就是, 改那個 index.html 檔就可以。可以先把這個檔用瀏覽器打開, 知道可以做出什麼簡報, 再來當然是改成我們要的簡報!

簡報區域

把這 index.html 用個文字編輯器打開, 我們可以改的地方就是這裡:

<body>

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
        <!-- 簡報內容放在這裡 -->
        </div>

    </div>

原來的檔案檔然沒有那麼親切的 <!-- 簡報內容放在這裡 --> 這些字眼, 而是很長很長一串的簡報內容, 要刪小心不要刪錯。我們細細看內容, 其實很容易, 你只要用 section 標籤, 就可以做一張投影片。例如:

<section>
<h1>做簡報好容易</h1>
</section>

每章都這樣包就可以了。

說好要用 Markdown 的

我們這裡說要用 Markdown 做簡報不是嗎? 但其實 Markdown 的阿貓阿狗編輯器通常都有把你把 Markdown 輸出成 HTML 檔的功能, 我們可以自己先用 --- 等把每張投影片區隔, 比如說:

# 我的簡報好棒棒
---
# 使用 Markdown
### 因為很簡單, 可以專注在內容上!
---
# 數學符號也可以

然後輸出成 HTML 時, 那 --- 會轉成 <hr /> 之類的, 我們再改成用 <section></section> 把每張包起來。以下這段影片基本上就是用這樣的方式:

影片解說 Markdown 轉 Reveal.js

等等, 這方法看來很白痴! 其實我本來也是這樣覺得, 不過後來發現其實這樣做我們可以完全不需要做網頁伺服器 (!) 但如果你不滿意, 這裡還是教你看起來高雅一點的方式。不過我們先插播一下數學符號的使用。

離線的數學符號

沒有要用到數學符號, 本節可以先跳過...

Reveal.js 內建基本上就有 MathJax, 你也可以花些功夫把 MathJax 放到本機使用。但是另有一個小巧些叫 KaTeX 的, 有人做好了套件, 我們也順變來試試怎麼裝 Reveal.js 的套件。首先我們先來看看有什麼樣的套件:

Reveal.js 的 plugins

我們發現有個

KaTeX Plugin

這就是我們要的。看看說明, 指出要下載個如圖示的壓縮檔

下載下來壓縮檔, 解壓縮成一個資料夾, 把這個叫 math-katex 的資料夾拉到 Reveal.js 那個大資料夾的 plugin 子資料夾下就算安裝好。

接著我們又要改那 index.html, 找到

           dependencies: [
                { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                { src: 'plugin/zoom-js/zoom.js', async: true },
                { src: 'plugin/notes/notes.js', async: true },
                { src: 'plugin/math-katex/math-katex.js', async: true }
            ]
        });

加入最後的那一行 { src: 'plugin/math-katex/math-katex.js', async: true }, 以後就可以用標準 LaTeX, 打 in-line, 打 display 型的數學符號。

Markdown 直接來!

這樣子做還是遜了一點, 可以不可以我們只編 Markdown 檔, 每次只改 Markdown 檔, 我們簡報就自動做好? 結果 (可能) 很容易! 例如我們的 Markdown 檔叫 presentation.md, 只要在那關鍵的、放投影片內容的區域打下:

            <section data-markdown="presentation.md"
                     data-separator="^\n---\n"
                     data-separator-vertical="^\n--\n">
            </section>

為了更加清楚, 我們看看上下文:

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
            <section data-markdown="presentation.md"
                     data-separator="^\n---\n"
                     data-separator-vertical="^\n--\n">
            </section>
        </div>

    </div>

這裡就是說, 我們要用 presentation.md 這個 Markdown 的檔案, 以 --- (獨立一行) 來做投影片分割, 然後如果同一組投影片群用 -- 分割, 會以上下按鈕來呈現。

就是這樣... 什麼, 你打開是一片黑!? 這原因是, 為了安全, 它一定要有個「網路伺服器」, 也就是雖然是在本機執行, 還是要好像上網這樣它才可以讓你看。

要有網路伺服器方式有很多, 如果有 Python (開始置入行銷), 在終端機「進入簡報資料夾」, 打入

python -m SimpleHTTPServer

通常它用 port 8000, 所以我們在瀏覽器打入

http://localhost:8000/index.html

就可以看到你的簡報了! 當然, 如果你的檔名真的還叫 index.html, 那個檔名是可以省略的。

← [pandoc] 輸出一本電子書 [Keynote] 程式碼高亮化 →