Reveal.js：把你的 Markdown 文稿变成 PPT
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 上臺風光一把是遠遠不夠的。
共勉。
參考鏈接：
?
- [奇技淫巧]純文本和工作流下的演示文稿
- GitHub - hakimel/reveal.js: The HTML Presentation Framework
https://github.com/wshuyi/mindmap2slide
ps：Reveal.js 也提供了圖形界面，有一個在線編輯器供君使用。竊以為這脫離了其本意，使用代碼（其實和 Markdown 一樣簡單易學）、專注演示內容才是其精髓——何況它的在線版一點也不流暢。
pps：最后播放時，請把 index.html 放置在 reveal.js-master 文件夾內。
總結
以上是生活随笔為你收集整理的Reveal.js：把你的 Markdown 文稿变成 PPT的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring MVC 实践 - Comp
- 下一篇： Socket编程实践(5) --TCP粘