Reveal.js：把你的 Markdown 文稿變成 PPT
https://github.com/hakimel/reveal.js
通過 Reveal.js 這個框架， 我們可以把 Markdown 文件轉爲類似 PPT 的演示文稿，輕快省力，減少排版上的時間，更專於文字內容；同時，也獲得 PPT 所不具有的靈活性。
PowerPoint Out!
PPT，全名 PowerPoint，諢名「力量點數」。
在公衆的意識裏，它已經成爲演講的標準配備（除非你供職於蘋果或錘子之類的公司）。如果你需要和同學或同事協作、確保老師或 BOSS 能不假思索地打開你的文稿，PPT 往往是第一選擇。雖然製作 PPT 的時候我希望自己很有力量、很 powerful，事實卻是我在一遍遍傻乎乎地雙擊文本框。
PPT 雖強大，但割據了磁盤的大量空間，運行起來的內存佔用也不小；尤其在 macOS 上，跑起 PPT 來就像乘上了上世紀的鐵皮小火車。隨着 macOS 的普及和動畫技術的進步，Keynote、Prezi 等新秀陸續挑戰 PPT 的權威，它們實現了各種炫目的動畫效果，把演示文稿變成了一場特效電影。
Absolutely，這很酷，但更多時候我們需要的只是簡單明瞭的演示。我嘗試過許多「輕量化」的演示文稿製作工具，這些或是在線或是本地的應用各具匠心，但本質上只是簡化版或變異版的 PPT。它們的根本問題在於過度依賴圖形界面，讓用戶在版面和動畫上花了太多精力，而分散了本應花在文字內容上的時間。
當我不需要和別人協作、或只是做一個簡單演講的時候，我希望有一個更輕量、更靈活的工具，讓我專於文字內容、快速完成演示文稿，同時在寫文章的同時就完成排版。
你一定想到了 Markdown，而我要介紹的工具也利用了 Markdown 的特性，卻不止於此。
Reveal.js 概覽
Reveal.js 是一個使用 HTML 語言製作演示文稿的 Web 框架，支持插入多種格式的內容，並以類似 PPT 的形式呈現。在英文中，「reveal」有「啓示」的意思，我覺得這一釋義恰到體現了演示文稿的本質：
化繁爲簡地、清晰地啓發觀衆，讓他們在最短時間內瞭解演講的內容。
Reveal.js 支持 Markdown 語法，我們得以直接在 Markdown 編輯器裏做 PPT。你用 Markdown 語法所實現的精美、簡潔的版式，在 Reveal.js 裏仍能沿用。這是我以前修改所得的一個演示效果：
不同於應用商店裏那些界面精美的應用，Reveal.js 給你的只是一堆源碼文件。所幸實際使用起來出乎意料的簡單，實際上，使用 Reveal.js 做演示文稿時，你就是在製作一個網頁，基本上你能找到的文本編輯器都可以勝任，不需要依賴特定的應用，而且你也只需要瞭解兩三個 HTML 語法。
Reveal.js 具有許多優勢：
- 製作靈活、不限應用，只需修改 HTML 文件
- 發佈靈活、不限平臺，只需打開 HTML 文件
- 豐富的特性，支持過渡動畫、代碼高亮、視頻背景、Markdown 語法、導出 PDF 等
- 極度輕量，佔用空間和內存少
試一試
Reveal.js 的源碼可以在其 首頁 下載到，只有一個不到 2M 的壓縮包。建議你多看幾遍其官網的演示效果，很流暢簡潔，但圖文並茂，動畫、列表、表格、，該有的一個不少。解壓所得文件夾裏的 demo.html，就是官網的源碼：
一下子幾百行代碼湧入眼中，讓人不免打起退堂鼓。好在裏面大多數的代碼你都不必理睬，只需關心關係到內容呈現的一小部分。爲了方便，我們將拿同一目錄下的 index.html 作爲模板。用你喜歡的 Markdown 編輯器打開它。
HTML 語法
在開始前，瞭解 HTML 語法的一點基礎會讓之後的進程更爲順利。相信初學 Markdown，你最喜歡用的就是那對星號，它們可以將所包含的文字加粗。在 HTML 裏，也可以理解爲就是這樣的標記（正經學 HTML 的話可不能這麼想當然）賦予了文字和段落一些屬性，只是比 Markdown 更爲豐富。
一份完整的 HTML 文件源碼，有兩部分組成。一對<head> </head>標籤裏面是一些關於該文檔的說明，在使用 Reveal.js 時已經設置好，不需要再做修改；接下來的一對<body> </body>標籤之間就是演示的主要內容。
在 index.html 裏，你可以看到，一對<body> </body>之間嵌套了一對<div class="reveal"> </div>，後者之間還套了一組<div class="slides"> </div>，大意理解爲它們所包含的內容，要用 Reveal.js 的方式來呈現。只有黃框內的，纔是我們的編輯對象，看起來代碼多，實際改動的很少。
雖然亂糟糟的一堆代碼也能用，但最好注意一下行首的縮進（就是按下 Tab 鍵出來的效果），保證每組標籤都靠左對齊，因爲它們之間可能嵌套另一組或幾組標籤，等內容多了你自己都不知道自己在幹什麼。
也有的標籤，所包含內容非常簡短，直接在一行內就可以解決，使用這樣的形式：<標籤名>你的內容</標籤名>。無論是那類標籤組，前後標籤名需一致，後一個標籤名之前加上斜槓「/」表示這對標籤到此爲止。記得有始有終，即使七夕過了，標籤也務必成對出現。
分頁
Reveal.js 裏頁面有兩種頁面類型，橫向的一級頁面、縱向的子頁面。後者務必嵌套在前者裏面。所謂的縱橫比較好理解，鍵盤上的左右箭頭控制一級頁面，上下鍵移動子頁面。
一級頁面用以下代碼實現：
<section>
用戶郵箱爲何頻收廣告
</section>
或者簡單一些，把它們寫在一行內：
<section>通知中心爲何深夜慘叫</section>
把任意一串代碼嵌套進之前黃框所示位置，就能實現一個頁面。
而子頁面則像俄羅斯套娃一樣：
<section>
<section>這是付費教程的升級</section>
<section>還是下一個圈錢手段</section>
</section>
組合着使用它們，可以實現兩級子母頁面的效果：
PPT 最基本的樣子就有了。多數的線性演講，用方向鍵按順序切換頁面，這樣的結構已經足夠；如果你講得很跳躍、隨性，需要臨場發揮、讓演示文稿隨你而動，也許 Prezi 更適合你（和 Reveal.js 類似的 impress.js 也可以實現）。
Markdown
支持 Markdown 是我使用 Reveal.js 最直接的原因。寫文章的同時就做好了排版工作，無需假借鼠標點點選選，不亦樂乎？我們還是通過一對標籤把 Markdown 文稿轉爲 PPT 樣式：
<section data-markdown>
# 震驚！國內某數字消費資訊網站竟提供這種服務
* 🔧 效率工具推薦 & 生產力技巧
* 💰 這些產品值得買
* 🔭 這個技術你會懂
* 👍 什麼是最好的？
</section>
在<section> 標籤裏添加data-markdown 屬性，表示該段內容用 Markdown 引擎解析。它呈現了 Markdown 語法簡潔清晰的排版效果：
既然支持了 Markdown，僅僅拿來展示文字未免大材小用。你在 Markdown 裏怎麼插入圖片，這裏也是一樣的做法——只不過，兩端套上了 HTML 標籤：
<section data-markdown>
</section>
圖片的地址可以是一個 URL，也能是本地的路徑。當採用後一種的時候，即使沒有網絡，Reveal.js 照樣可以正常播放。至於序列表、表格、代碼塊，這些 Markdown 能呈現的效果，Reveal.js 也當仁不讓。
其實把 Markdown 轉 PPT 的核心操作就是這麼一組標籤，爲了方便，可以把編輯過的 index.html 文件保存一下，下次直接往裏面粘貼文字內容。當然還有更加偷懶的，像我這樣把源碼丟進 Drafts 裏，隨時隨地擼 PPT：
你會發現，在手機上輸入特殊符號是一件痛苦的事。所以我修改得到了一個快速輸入 HTML 標籤的 Drafts keyboard extensions，第一次點擊時它會輸入 <section> 標籤並標上data-markdown 屬性，鍵入完頁面內容後再點一次，它會自帶補全後一個 </section>標籤。你可以下載原作者 @Rob Malanowski 的 keyboard extensions，把原本要輸入的括號改成 HTML 標籤即可：
轉場動畫
PPT 素來以豐富的演示效果著稱，Reveal.js 也不甘落後。通過 CSS 樣式和 javascript 它幾乎可以實現任何特效，可惜對大多數用戶而言這不是那麼直觀的操作。好在 Reveal.js自帶了一些轉場動畫，使用起來非常簡單，和之前調用 Markdown 渲染引擎一樣，只需要爲<section>標籤data-transition屬性就能實現：
<section data-transition="參數">
別眨眼！
</section>
多來幾組看看：
這樣的動畫生動而不落窠臼，在厭倦 PPT 的漩渦特效後，何不轉向簡單一些的動畫換換口味。轉場動畫支持多種切換效果，你可以選擇這些參數：fede，slide，convex，concave，zoom，或者停用動畫：none（在你沒有設置時，Reveal.js 默認採用 slide 動畫）。特別注意的是，參數一定要小寫，否則不生效。
背景顏色
如果你不喜歡 Reveal.js 那一黑到底的背景，那就自己定義它。我們在標籤裏添加data-background屬性來自定義背景顏色：
<section data-background="十六進制顏色碼">
這個服務好不好？羣內作者說真相
</section>
背景顏色屬性只支持十六進制顏色碼，我一般用 這個在線工具 把 RGB 顏色碼轉爲十六進制顏色碼。至於怎麼獲得 RGB 顏色碼？Photoshop、macOS 自帶的數碼測色計，你有的是工具可用；在無暇自己配色時，挑一個 Material Design 的色板則是不過不失的選擇。言歸正傳，看看實際效果：
當然，只有純色背景是不是太單調了？我倒是覺得蠻扁平蠻簡潔的（還不是懶）……那把視頻當作背景怎麼樣：
<section data-background-video="視頻地址">
Shut up and take my Money！
</section>
插入視頻仍然只是一條參數的功夫，對於追求視覺效果的製作者，不可謂不簡單。和圖片一樣，視頻地址也支持 URL 和本地路徑， 我建議插入本地的視頻，如果演講時在線資源播放失敗，可就弄巧成拙矣。我測得 mp4 和 mov 是支持的，其他格式似乎不可以。把視頻當作背景，有沒有覺得自己的演示文稿蓬蓽生輝了？
如果還嫌不夠，順便說一句，Reveal.js 支持 javascript，所以其應用場景可不限於傳統的演示文稿——如果你想做一個現場投票、幸運轉盤抽獎，都沒問題。這些有趣的拓展功能都內嵌在你的 Reveal.js 版「PPT」裏，和演講無縫銜接，聽起來很酷是不是？
更多的功能和應用場景，請君自己探索吧。
稍等，你是不是意識到這份教程中的例子蘊含了一些難言之隱？是的，我們不能言說的東西，請看整份 Reveal.js 演示自行體會：
我想我達到了「輕鬆排版，專於內容」的效果🤣
尾巴
當傳統的工具解決不了或不是最優解決方案之時，理應擁抱新的工具。
Reveal.js 只是 PPT 替代品的一種，更加適合輕量的應用場景，而在一些傳統領域，PPT 仍然老當益壯。其實從演講的角度俯瞰，各種工具也是擇適者而用，並無優劣之分。
讀大學時，大一尚未結束我就先後給團委、黨委、創業學院做過演示文稿，作品還多次在省賽和國賽拿獎；目前我和國內最大的幾家汽車公司合作，爲他們做過幾次項目展示的 PPT。但無論我設計了多麼炫目的動畫、精美的排版，我始終堅持演示文稿的本質是簡單明瞭地說明內容，一切都是爲內容服務的。PPT 固然強大，但演示並不是唯 PPT 論，更不應該唯動畫論；做演示的時候，應該從內容出發，這之外的東西權作錦上添花。
我從 2013 年開始學做 PPT，靠它當飯碗不過一年多時間，作爲一個涉世不深的青年，我所提倡的「反 PPT」曾遭到業內老前輩的批評，在論戰之中我也對這個軟件有了更多的認識；但是應用畢竟分場景，我只是建議不要侷限於 PPT，絕非全盤棄之。一年前我尚處於創業初的艱苦之中，字裏行間透着一絲憤世嫉俗和矯枉過正；那時提倡 HTML 代替 PPT 的文章發在簡書和一些公衆號，不幸碰了 PPT 付費課程提供者的紅線，遭到狂轟濫炸。
而在少數派，我相信這裏的讀者更理智——你們總不會把少數派當雞湯喝吧？所以，我重新寫了這個選題，希望能幫到被 PPT 折磨的你。
小子的文章不是芙麗嘉的蘋果，你讀了並不能圓月入十萬的美夢；甚至連刺激多巴胺分泌的迷情巧克力也算不上，不用期許在這裏找成功的幻覺，升值加薪憑的還是腳踏實地，只靠 PPT 上臺風光一把是遠遠不夠的。
共勉。
參考鏈接：
https://github.com/wshuyi/mindmap2slide
ps：Reveal.js 也提供了圖形界面，有一個在線編輯器供君使用。竊以爲這脫離了其本意，使用代碼（其實和 Markdown 一樣簡單易學）、專注演示內容纔是其精髓——何況它的在線版一點也不流暢。
pps：最後播放時，請把 index.html 放置在 reveal.js-master 文件夾內。