居然可以用 JS 寫 PPT？

作者：佚名 2021-11-16 12:25:14

對于前端同學來說，一身的css功力用不上也是個痛點。對于使用markdown來寫文檔的同學來說，將文檔轉成ppt需要重新排版也是件重復性的工作量。

[[435271]]

居然可以用 js 寫 PPT

用powerpoint或者keynote寫演示文稿，對于代碼、數學公式等的支持一直是個痛點。而且對于前端同學來說，一身的css功力用不上也是個痛點。對于使用markdown來寫文檔的同學來說，將文檔轉成ppt需要重新排版也是件重復性的工作量。

于是我們需要一個基于web技術的ppt框架，reveal.js在這個領域成名已久了，而且上個月還有發(fā)布新版本，維護得還蠻好，第一步我們就選它了。

將reveal.js運行起來

首先clone一份reveal.js最新的代碼：

git clone https://github.com/hakimel/reveal.js

我們照抄一份index.html，比如叫做study.html:

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
  <title>reveal.js</title>  
  <link rel="stylesheet" href="dist/reset.css">  
  <link rel="stylesheet" href="dist/reveal.css">  
  <link rel="stylesheet" href="dist/theme/black.css">  
  <!-- Theme used for syntax highlighted code -->  
  <link rel="stylesheet" href="plugin/highlight/monokai.css">  
 </head>  
 <body>  
  <div class="reveal">  
   <div class="slides">  
    <section>Slide 1</section>  
    <section>Slide 2</section>  
   </div>  
  </div>  
  <script src="dist/reveal.js"></script>  
  <script src="plugin/notes/notes.js"></script>  
  <script src="plugin/markdown/markdown.js"></script>  
  <script src="plugin/highlight/highlight.js"></script>  
  <script> 
   // More info about initialization & config:  
   // - https://revealjs.com/initialization/  
   // - https://revealjs.com/config/  
   Reveal.initialize({  
    hash: true,  
    // Learn about plugins: https://revealjs.com/plugins/  
    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]  
   });  
  </script>  
 </body>  
</html>

在reveal.js目錄下運行npm install, 然后運行npm start就可以啟動一個server來查看上面的ppt網頁。默認使用8000端口，如果被占用了可以通過指定port參數換一個，比如我們換成30800吧：

npm start -- --port=30800

然后通過訪問瀏覽器的127.0.0.1:30800/study.html就可以看到我們的ppt啦：

reveal.js step by step

上面這個網頁其實挺容易懂的，不用react或vue框架，也不需要配置webpack。其核心內容部分其實非常簡單，就是每一頁演示文稿對應一個section。

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

支持markdown

reveal.js的第一個強大功能是直接可以使用markdown來寫演示文稿。在我們上面默認的html模板中已經加載了RevealMarkdown插件。所以我們要做的就是在下面的模板上寫markdown就好。

<section data-markdown>  
    <textarea data-markdown>                  
    </textarea>  
</section>

我們來看個例子：

<section data-markdown>  
    <textarea data-markdown>  
推薦系統(tǒng)的主要算法包括：  
- 矩陣分解  
- 線性模型  
- 樹模型  
- 深度學習模型                      
     </textarea>  
</section>

生成的幻燈片如下：

換個主題

如果覺得黑底白字的太丑了，我們可以換個主題。

主題就是個css，在這條語句里引用：

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

換成dist/theme/下面其它的css主題，或者干脆自己擼一個。

比如改成：

<link rel="stylesheet" href="dist/theme/beige.css">

效果變成這樣：

支持數學公式

支持數學公式的js庫和插件默認并沒有包含在默認模板中，我們需要將其增加進來。

我們先把數學公式庫的js引進來：

<script src="plugin/math/math.js"></script>

然后在初始化時Reveal.initialize增加對于數學公式的配置,并且引入cdn上的mathjax庫：

Reveal.initialize({  
        hash: true,  
        math: {  
          mathjax:  
            "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",  
          config: "TeX-AMS_HTML-full",  
          // pass other options into `MathJax.Hub.Config()`  
          TeX: { Macros: { RR: "{\\bf R}" } },  
        },

最后，在plugins中增加RevealMath插件：

plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],      });

完整的代碼如下：

<script src="plugin/math/math.js"></script>  
<script>  
  Reveal.initialize({  
    hash: true,  
    math: {  
      mathjax:  
        "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",  
      config: "TeX-AMS_HTML-full",  
      // pass other options into `MathJax.Hub.Config()`  
      TeX: { Macros: { RR: "{\\bf R}" } },  
    },  
    plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],  
  });  
</script>

插件引入之后我們就可以在幻燈片中寫公式了。

可以直接在section中寫：

<section>  
    \[\begin{aligned}  
    \ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}| \  
    \end{aligned} \]  
</section>

也可以嵌入到markdown中：

 <section data-markdown>  
  <textarea data-markdown>  
                $MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|$                   
   </textarea>  
</section>

出來的效果是這樣的：

代碼高亮

代碼高亮默認是支持的，我們可以在markdown里面用```來使用：

顯示出來的效果如下：

md-code

也可以直接使用html的pre和code標簽來顯示：

<section>  
    <pre>  
        <code class="language-javascript">  
            model.compile({  
                optimizer: tf.train.sgd(0.000001),  
                loss: 'meanSquaredError' 
            });  
            return model.fitDataset(flattenedDataset, {  
                epochs: 10,  
                callbacks: {  
                    onEpochEnd: async (epoch, logs) => {  
                        console.log(epoch + ':' + logs.loss);  
                    }  
                }  
            });  
        </code>  
    </pre>  
</section>

顯示的效果如下：

代碼高亮的theme也是可以更換的，只要更換plugin/highlight下面的css即可，例：

<link rel="stylesheet" href="plugin/highlight/zenburn.css" />

我們順便把reveal.js的theme也換一下：

<link rel="stylesheet" href="dist/theme/moon.css" />

效果變成下面這樣：

我們匯總下上面的代碼：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8" />  
    <meta  
      name="viewport"  
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"  
    />  
    <title>reveal.js學習</title>  
    <link rel="stylesheet" href="dist/reset.css" />  
    <link rel="stylesheet" href="dist/reveal.css" />  
    <link rel="stylesheet" href="dist/theme/moon.css" />  
    <!-- Theme used for syntax highlighted code -->  
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />  
  </head>  
  <body>  
    <div class="reveal">  
      <div class="slides">  
        <section>Slide 1</section>  
        <section>  
            \[\begin{aligned} 
            \ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}| \  
            \end{aligned} \]  
        </section>  
        <section data-markdown>  
          <textarea data-markdown>  
推薦系統(tǒng)的主要算法包括：  
- 矩陣分解  
- 線性模型  
- 樹模型  
- 深度學習模型                     
                     </textarea  
          >  
        </section>  
        <section data-markdown>  
          <textarea data-markdown>  
                        $MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|$                    
           </textarea>  
        </section>  
        <section>  
            <pre>  
                <code class="language-javascript">  
                    model.compile({  
                        optimizer: tf.train.sgd(0.000001),  
                        loss: 'meanSquaredError'  
                    });               
                     return model.fitDataset(flattenedDataset, {  
                        epochs: 10,  
                        callbacks: {  
                            onEpochEnd: async (epoch, logs) => { 
                                console.log(epoch + ':' + logs.loss);  
                            }  
                        }  
                    });  
                </code>  
            </pre>  
        </section>  
      </div>  
    </div>  
    <script src="dist/reveal.js"></script>  
    <script src="plugin/notes/notes.js"></script> 
    <script src="plugin/markdown/markdown.js"></script>  
    <script src="plugin/highlight/highlight.js"></script>  
    <script src="plugin/math/math.js"></script>  
    <script>  
      // More info about initialization & config: 
      // - https://revealjs.com/initialization/  
      // - https://revealjs.com/config/  
      Reveal.initialize({  
        hash: true,  
        math: {  
          mathjax:  
            "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",  
          config: "TeX-AMS_HTML-full",  
          // pass other options into `MathJax.Hub.Config()`  
          TeX: { Macros: { RR: "{\\bf R}" } },  
        },  
        // Learn about plugins: https://revealjs.com/plugins/  
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],  
      });  
    </script>  
  </body>  
</html>

背景圖片

section支持data-background-image屬性來指定背景圖片。

例：

<section data-background-image="https://cdn.jsdelivr.net/www.jsdelivr.com/000a3f2b6a7baa6ae0f786a251fd105e4b230d8e/img/landing/network-map@2x.png">        </section>

HTML and CSS

比起markdown，HTML和CSS也是寫演示文稿的好手段，可控的方法更多。而且也可以跟reveal.js的功能有更好的結合。

在section中，可以像在普通網頁中一樣寫HTML標簽：

<section>  
    <h3 style="{color: #ffec3d;}">推薦系統(tǒng)的冷啟動</h3>  
    <ul>  
        <li>利用熱門數據</li>  
        <li>利用用戶注冊信息</li>  
        <li>利用第三方數據</li>  
        <li>利用物品內容屬性</li>  
    </ul>  
</section>

我們也可以在header中寫style屬性給section中使用。

比如默認字體太大了，我們可以給調一調：

<style>  
    ul {  
        font-size: 18px;  
    }  
</style>

淡入淡出

結合html標簽，可以指定淡入淡出的效果。這可以通過給標簽添加class屬性為fragment實現。

我們來看個淡入的例子：

<section>  
    <h3>推薦系統(tǒng)的冷啟動</h3>  
    <ul>  
        <li class="fragment">利用熱門數據</li>  
        <li class="fragment">利用用戶注冊信息</li>  
        <li class="fragment">利用第三方數據</li>  
        <li class="fragment">利用物品內容屬性</li>  
    </ul>  
</section>

除了淡入之外，我們還可以對某項進行標紅：

<section>  
     <h3>推薦系統(tǒng)的冷啟動</h3>  
     <ul>  
         <li class="fragment highlight-red">利用熱門數據</li>  
         <li>利用用戶注冊信息</li>  
         <li>利用第三方數據</li>  
         <li>利用物品內容屬性</li>  
     </ul>  
 </section>

效果如下：

導出為pdf

演示文稿做好之后，除了在瀏覽器中看，我們也可以導出成為pdf格式。方法是在URI之后增加"?print-pdf"后綴，比如：http://0.0.0.0:30800/study.html?print-pdf

然后我們再用另存為pdf格式功能來保存下來就好。

更進一步

除了上面介紹的基本特性之外，reveal.js支持自動播放、自制插件、支持處理事件等等有利于開發(fā)人員寫slides的特性。相信能給你的slides帶來新的好玩的東西，將匯報與分享變成樂趣。Enjoy it!

責任編輯：龐桂玉來源：前端大全

js PPT 前端