reveal.js：構(gòu)建程序員友好型的網(wǎng)頁(yè)版 PPT
本文發(fā)布于 2023.05.16
以網(wǎng)頁(yè)的形式創(chuàng)建 PPT，支持 Markdown 格式，對(duì)程序員非常友好！
官網(wǎng)：https://revealjs.com/
快速開始
注意：不使用構(gòu)架工具，直接網(wǎng)頁(yè)中引入
下載最新版 reveal.js 代碼：https://github.com/hakimel/reveal.js/archive/master.zip
解壓縮，index.html 中修改內(nèi)容練習(xí)即可
瀏覽器打開 index.html 查看效果
如何使用
打開 index.html 就能看到最簡(jiǎn)單版本的 PPT 了。我們看下代碼：
首先看 PPT DOM 結(jié)構(gòu)：
.reveal>.slides>section * n 的結(jié)構(gòu)是固定的。一個(gè) <section> 代表一個(gè)幻燈片，上例中有兩個(gè)幻燈片。
如何初始化？加載 dist/reveal.js 文件后，通過(guò)全局變量 Reveal：
通過(guò) Reveal.initialize() 方法初始化上述的 DOM 結(jié)構(gòu)（不需要指定選擇器 selector），接收選項(xiàng)參數(shù) options，{ hash: true, } 表示通過(guò) hash 的形式，記住當(dāng)前處于哪個(gè)幻燈片位置，方便地址分享與恢復(fù)。
使用插件
reveal.js 腳本本身內(nèi)置的功能并不多，如果要支持像 Markdown 語(yǔ)法、代碼高亮、演講者模式這些功能，需要通過(guò)插件提供。
插件是通過(guò) Reveal.initialize() 方法的 options 參數(shù)的 plugins 參數(shù)提供的，是一個(gè)數(shù)組，接受一個(gè)插件列表。
上面我們加載了三個(gè)插件：
功能介紹
Markdown 語(yǔ)法
我們需要將 Markdown 包含在 <textarea data-template> 元素內(nèi)（注意，data-template attribute 是必須的），同時(shí)將 <textarea> 包含在 <section data-markdown> 中（注意，data-markdown attribute 是必須的）。
這里的 section 可就同時(shí)包含多個(gè)幻燈片了。
更詳細(xì)的內(nèi)容參見：https://revealjs.com/markdown/
代碼高亮
以上代碼是在 Markdown 幻燈片中插入代碼的方式。不過(guò)這段代碼是支持高亮狀態(tài)切換的，不同的高亮狀態(tài)使用豎線 | 分隔，上述定義了 3 個(gè)高亮狀態(tài)：
當(dāng)我們第一次進(jìn)入幻燈片時(shí)，會(huì)高亮第 1 到第 2 行代碼，
切換，高亮第 3 行代碼
切換，高亮第 4 行代碼
切換，當(dāng)前幻燈片結(jié)束
更詳細(xì)的內(nèi)容參見：https://revealjs.com/code/
演講者模式
以上是在 Markdown 中增加演講者注釋內(nèi)容的方式，通過(guò) data-separator-notes attribute 來(lái)指定，我們這里將Note: 開頭的部分，作為注釋內(nèi)容。
更詳細(xì)的內(nèi)容參見：https://revealjs.com/speaker-view/
