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
- 下一篇: 爱上MVC3系列~同步与异步提交,在过滤