前言

相信大家都有過 PPT 分享的經(jīng)歷，超級貓一直覺得用 powerpoint 寫幻燈片太麻煩，效率太低了。

作為程序員，特別是前端，有沒有更簡結(jié)與高逼格幻燈片實現(xiàn)方式呢？肯定是有的??！

今天給大家?guī)淼氖鞘褂?Markdown 和 HTML 寫逼格滿滿的 PPT 的正確姿勢！

[[356306]]

reveal-md

reveal-md 是使用 Markdown 來做 PPT 展示的開源項目，標星 2.1K 。

安裝

npm install -g reveal-md 

使用

reveal-md path/demo.md  

其中， path/demo.md 是你的 Markdown 文件地址，可以使用本地地址，也可以使用 URL。

使用如下的 Markdown 文件 demo.md ：

## 前端GitHub 
 
* 大前端集合 
* GitHub 優(yōu)秀開源項目推薦 
 
--- 
 
## 內(nèi)容 
 
> 專注于挖掘優(yōu)秀的前端開源項目，抹平你的前端信息不對稱。 
 
涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS 等！ 
 
 
--- 
 
## 前端資源合集 
 
* 收集、整理、推薦業(yè)界高品質(zhì)前端資源合集 
* 優(yōu)秀的工具、庫、好的教程 
* 了解業(yè)界更優(yōu)秀的代碼、工具、業(yè)界最新的技術(shù) 

在終端運行命令： reveal-md ./demo.md

效果如圖：

主題使用

包含的主題有以下幾種：

• beige
• black
• blood
• league
• moon
• night
• serif
• simple
• sky
• solarized
• white

比如指定 league 主題使用：

reveal-md path/demo.md --theme league 

效果如圖：

還可以指定自己寫的主題，也就是自己寫的 css 樣式，使用自定義主題后，會覆蓋默認的主題。

比如自定義文件位于 ./theme/my-custom.css 中時，指定對應(yīng)的路徑即可。

reveal-md slides.md --theme theme/my-custom.css 

項目地址：

https://github.com/webpro/rev...

reveal.js

這是一個基于 CSS 的 3D 幻燈片工具，標星 54K。

Reveal.js 做 PPT 的優(yōu)點是可以使用 markdown 語言直接寫靜態(tài)的文本，并可以加入各種 html 語言支持的交互動畫，然后由 Pandoc 直接轉(zhuǎn)化成 PPT。

reveal.js 是一個開放源代碼 HTML 表示框架。 它使使用 Web 瀏覽器的任何人都可以免費創(chuàng)建功能齊全且美觀的演示文稿。

該框架具有廣泛的功能，包括嵌套幻燈片，Markdown 支持，自動動畫，PDF 導出，演講者注釋，LaTeX 支持，語法突出顯示的代碼等等。

reveal.js 有一下幾個特點：

• 支持標簽來區(qū)分每一頁幻燈片
• 可以使用 markdown 來寫內(nèi)容
• 支持 pdf 的導出
• 支持演說注釋
• 提供 JavaScript API 來控制頁面
• 提供了多個默認主題和切換方式
• 自適應(yīng)移動端和 PC 端

使用

使用分為 基本使用、完整安裝、npm 方式安裝 3 種方式。

基本使用

1. 下載最新的 manifest.js版本 https://github.com/hakimel/reveal.js/archive/master.zip
2. 解壓縮并將 index.html 中的示例內(nèi)容替換為您自己的內(nèi)容
3. 在瀏覽器中打開 index.html 進行查看

完整安裝

安裝：

git clone https://github.com/hakimel/reveal.js.git 
cd reveal.js && npm install 
npm start 

打開 http://localhost:8000 查看您的演示文稿。

npm 方式安裝

npm install reveal.js 
# or 
yarn add reveal.js 

直接導入使用

import Reveal from 'reveal.js'; 
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js'; 
 
let deck = new Reveal({ 
   plugins: [ Markdown ] 
}) 
deck.initialize(); 

還需要添加 reveal.js 樣式 和 主題 .

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css"> 
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css"> 

使用

幻燈片的內(nèi)容需要包含在 <div class="reveal"> <div class="slides"> 的標簽中。

一個 section 是一頁幻燈片。當 section 包含在 section 中時，是一個縱向的幻燈片。

怎么理解呢？ 可以這樣理解：橫向的幻燈片代表一章，縱向的幻燈片代表一章中的一節(jié)。那么橫向的幻燈片在播放時是左右切換的，而縱向的幻燈片是上下切換的。

For example:

<div class="reveal"> 
    <div class="slides"> 
        <section>Single Horizontal Slide</section> 
        <section> 
            <section>Vertical Slide 1</section> 
            <section>Vertical Slide 2</section> 
        </section> 
    </div> 
</div> 

html 實現(xiàn)

標題和正文

section 中的內(nèi)容就是幻燈片的內(nèi)容，你可以使用 h2 標簽標示 title ， p 表示內(nèi)容。需要紅色的字體可以直接設(shè)置 style 的 color 為 red 。

當某一頁需要特殊背景色，可以使用 data-background 在 section 上設(shè)置, data-background-transition 表示背景的過渡效果。

For example:

<section data-background-transition="zoom" data-background="#dddddd"> 

如果需要正文一段一段出現(xiàn)。可以使用 fragment 。

For Example:

<p class="fragment"></p> 

代碼

reveal.js 使用 highlight.js 來支持代碼高亮?？梢灾苯訉?nbsp;code 標簽來實現(xiàn), data-trim 表示去除多余的空格。

For Example:

<pre><code data-trim> 
  console.log('hello reveal.js!'); 
</code></pre> 

注釋

在演說時，會用到注釋，對于注釋，可以通過 <aside class="notes"> 來實現(xiàn)。

For Example:

<aside class="notes"> 
  這里是注釋。 
</aside> 

在幻燈片頁面，按下 s 鍵，就可以調(diào)出注釋頁面，注釋頁面包含了當前幻燈片，下一章幻燈片，注釋，以及幻燈片播放時間。

markdown 實現(xiàn)

reveal.js 不僅支持 html 表示來實現(xiàn)內(nèi)容， 還可以通過 markdown 來實現(xiàn)內(nèi)容。使用 markdown 實現(xiàn)內(nèi)容時，需要對 section 標示添加 data-markdown 屬性，然后將 markdown 內(nèi)容寫到一個 text/template 腳本中。

For Example:

<section data-markdown> 
    <script type="text/template"> 
        ## Page title 
 
        A paragraph with some text and a [link](http://hakim.se). 
    </script> 
</section> 
背景色，fragment功能的實現(xiàn)，可以通過注釋來實現(xiàn)。For Example: 
 
<section data-markdown> 
    <script type="text/template"> 
    <!-- .slide: data-background="#ff0000" --> 
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" --> 
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" --> 
    </script> 
</section> 

外置 md 文件

reveal.js 可以引用一個外置的 markdown 文件來解析。

For Example:

<section data-markdown="example.md"   
         data-separator="^\n\n\n"   
         data-separator-vertical="^\n\n"   
         data-separator-notes="^Note:"   
         data-charset="iso-8859-15"> 
</section> 

分頁實現(xiàn)

一個 markdown 文件中可以連續(xù)包含多個章內(nèi)容?？梢栽?nbsp;section 中 通過屬性 data-separator, data-separator-vertical 來劃分章節(jié)。

For Example:

<section data-separator="---" data-separator-vertical="--"  > 
  <script type="text/template"> 
    # 主題1 
    - 主題1-內(nèi)容1 
    - 主題1-內(nèi)容2 
    -- 
    ## 主題1-內(nèi)容1 
    內(nèi)容1-細節(jié)1 
    -- 
    ## 主題1-內(nèi)容2 
    內(nèi)容1-細節(jié)2 
    --- 
    # 主題2 
  </script> 
</section> 

注釋

對 section 添加 data-separator-notes="^Note:" 屬性，就可以指定 Note: 后面的內(nèi)容為當前幻燈片的注釋。

For Example:

# Title 
## Sub-title 
 
Here is some content... 
 
Note: 
This will only display in the notes window. 

導出 PDF

• 在瀏覽器打開文件的 url 上添加 print-pdf 即可以，比如：  http://localhost:8000/demo.html/?print-pdf ，你可以測試一下官方的 revealjs.com/demo?print-pdf
• 打開瀏覽器的保存為 pdf 的彈框，快捷鍵為：CTRL/CMD + P
• 邊距設(shè)置為 無
• 勾上背景圖形
• 點擊 保存 即可

多主題

reveal.js 提供了多種樣式?？梢酝ㄟ^引用不同的主題來實現(xiàn)。具體主題查看 reveal.js/css/theme 下的 css 文件。

總結(jié)

用 reveal.js 來實現(xiàn)幻燈片，可以只關(guān)注內(nèi)容，忽略各種切換效果。

而且可以使用 markdown 來實現(xiàn)，大大提高了編寫效率。對于最后生成的 html 文件，可以部署到服務(wù)器，這樣只需要網(wǎng)絡(luò)就可以進行分享，不需要使用 U 盤拷來拷去了。

https://github.com/hakimel/re...

最后

這兩個神級項目的功能遠遠不止這么點，還有多少呢？

看看 Github 上的 README.md 你就知道了，在現(xiàn)在這樣一個大前端的時代，有什么是網(wǎng)頁不能完成的呢？

好了，看到這里，下次演示 PPT 時，你應(yīng)該就能在眾人面前裝逼了 :wink: