用 Markdown 與 Reveal.js 來製作簡報

相信很多人對於 Markdown 的簡易語法愛不釋手，而 Reveal.js 是一套可以使用 Markdown 語法以 HTML 呈現的簡報框架

透過將 Markdown 與 Reveal.js 結合就可以讓我們在學習過程中所累積下來的筆記，快速地轉換簡報，大大地減少製作簡報所需的時間與精力

`Reveal.js`的優點

可以用 html 做簡報
- Reveal.JS 網站就是透過 Reveal.js 製作，大家可以去試試
具垂直簡報的特性
- 以 PowerPoint 為例，在簡報中的 下、右 代表著同一件事，就是下一張投影片，上、左代表著上一張投影片，而在 Reveal.js 中，投影片的序列就不是單一的，Reveal.js 有水平及垂直兩個維度的概念
- 兩個維度讓我們更容易去區隔出不同的簡報章節
不同的檢視角度
- 按 esc 概觀所有簡報，方便搜尋
- Alt+ click 可以放大簡報內容
支援觸控
讓簡報者不一者需要電腦，透過行動裝置也可以進行一場精采的簡報
支援 markdown
可以使用 markdown 語法來建立簡報內容
片段顯示及強調
可以簡單地利用 class 與 html attribute 來達到效果
快速設定轉場效果
- 利用 javascript 的屬性設定，就可以變化不同的轉場效果
- 預設有 None、Fade、Slide、Convex、Concave、Zoom
快速設定簡報風格
- 透過載入不同的 css，就可以改變整個簡報風格
- 預設有 Black (default)、White、League、Sky、Beige、Simple Serif、Blood、Night、Moon、Solarized

clone 專案
從 gihub clone 整個專案，然後以 website 啟動專案(ex：iis 站台、webmatrix 以 website 開啟….)
加上 markdown 檔案區段
在根目錄的 index.html 中，加入想要透過 Reveal.js 呈現簡報的 markdown 檔案及分隔符號(加在 body –> div[class='reveal'] –> div[class='slides'] 中)
```
<section data-markdown="intro.md" data-separator="------" data-separator-vertical="----"></section>
```
上圖表示使用網站根目錄下的intro.md
- 讓 Reveal.js 使用 markdown 語法進行簡報主要有兩種方式：
  1. In-html Markdown
    將 markdown 寫在 index.html 中
  2. External Markdown
    使用外部的 markdown 檔案內容
  因為主要是希望可以透過學習筆記的方式來快速產生簡報，External Markdown 才是我們設定的目標
markdown 設定
設定分隔方式(官方使用^n), 我個人使用上覺得會造成檔案行數太多不好閱讀，所以我改用其他符號，大家也可以依本身喜好自訂分隔符號
- 3-1. data-separator 可以指定用來分隔水平投影片的符號
  在 markdown 檔案使用 ------(6個 - 符號) 做為分隔
- 3-2. data-separator-vertical 可以指定用來分隔垂直投影片的符號
  在 markdown 檔案使用 ----(4個 - 符號) 做為分隔