自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

居然可以用 JS 寫 PPT？

作者：佚名
開發(fā) 前端
對(duì)于前端同學(xué)來說，一身的css功力用不上也是個(gè)痛點(diǎn)。對(duì)于使用markdown來寫文檔的同學(xué)來說，將文檔轉(zhuǎn)成ppt需要重新排版也是件重復(fù)性的工作量。

[[435271]]

 居然可以用 js 寫 PPT

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

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

將reveal.js運(yùn)行起來

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

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

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

  1. <!doctype html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
  6.   <title>reveal.js</title>  
  7.   <link rel="stylesheet" href="dist/reset.css">  
  8.   <link rel="stylesheet" href="dist/reveal.css">  
  9.   <link rel="stylesheet" href="dist/theme/black.css">  
  10.   <!-- Theme used for syntax highlighted code -->  
  11.   <link rel="stylesheet" href="plugin/highlight/monokai.css">  
  12.  </head>  
  13.  <body>  
  14.   <div class="reveal">  
  15.    <div class="slides">  
  16.     <section>Slide 1</section>  
  17.     <section>Slide 2</section>  
  18.    </div>  
  19.   </div>  
  20.   <script src="dist/reveal.js"></script>  
  21.   <script src="plugin/notes/notes.js"></script>  
  22.   <script src="plugin/markdown/markdown.js"></script>  
  23.   <script src="plugin/highlight/highlight.js"></script>  
  24.   <script> 
  25.    // More info about initialization & config:  
  26.    // - https://revealjs.com/initialization/  
  27.    // - https://revealjs.com/config/  
  28.    Reveal.initialize({  
  29.     hash: true,  
  30.     // Learn about plugins: https://revealjs.com/plugins/  
  31.     plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]  
  32.    });  
  33.   </script>  
  34.  </body>  
  35. </html> 

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

  1. npm start -- --port=30800 

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

reveal.js step by step

上面這個(gè)網(wǎng)頁其實(shí)挺容易懂的，不用react或vue框架，也不需要配置webpack。其核心內(nèi)容部分其實(shí)非常簡(jiǎn)單，就是每一頁演示文稿對(duì)應(yīng)一個(gè)section。 

  1. <div class="reveal">  
  2.  <div class="slides">  
  3.   <section>Slide 1</section>  
  4.   <section>Slide 2</section>  
  5.  </div>  
  6. </div> 

支持markdown

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

  1. <section data-markdown>  
  2.     <textarea data-markdown>                  
  3.     </textarea>  
  4. </section> 

我們來看個(gè)例子： 

  1. <section data-markdown>  
  2.     <textarea data-markdown>  
  3. 推薦系統(tǒng)的主要算法包括：  
  4. - 矩陣分解  
  5. - 線性模型  
  6. - 樹模型  
  7. - 深度學(xué)習(xí)模型                      
  8.      </textarea>  
  9. </section>  

生成的幻燈片如下：

換個(gè)主題

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

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

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

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

比如改成： 

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

效果變成這樣：

支持?jǐn)?shù)學(xué)公式

支持?jǐn)?shù)學(xué)公式的js庫和插件默認(rèn)并沒有包含在默認(rèn)模板中，我們需要將其增加進(jìn)來。

我們先把數(shù)學(xué)公式庫的js引進(jìn)來： 

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

然后在初始化時(shí)Reveal.initialize增加對(duì)于數(shù)學(xué)公式的配置,并且引入cdn上的mathjax庫： 

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

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

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

完整的代碼如下： 

  1. <script src="plugin/math/math.js"></script>  
  2. <script>  
  3.   Reveal.initialize({  
  4.     hash: true,  
  5.     math: {  
  6.       mathjax:  
  7.         "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",  
  8.       config: "TeX-AMS_HTML-full",  
  9.       // pass other options into `MathJax.Hub.Config()`  
  10.       TeX: { Macros: { RR: "{\\bf R}" } },  
  11.     },  
  12.     plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],  
  13.   });  
  14. </script> 

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

可以直接在section中寫： 

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

也可以嵌入到markdown中： 

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

出來的效果是這樣的：

代碼高亮

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

顯示出來的效果如下：

md-code

也可以直接使用html的pre和code標(biāo)簽來顯示： 

  1. <section>  
  2.     <pre>  
  3.         <code class="language-javascript">  
  4.             model.compile({  
  5.                 optimizer: tf.train.sgd(0.000001),  
  6.                 loss: 'meanSquaredError' 
  7.             });  
  8.             return model.fitDataset(flattenedDataset, {  
  9.                 epochs: 10,  
  10.                 callbacks: {  
  11.                     onEpochEnd: async (epoch, logs) => {  
  12.                         console.log(epoch + ':' + logs.loss);  
  13.                     }  
  14.                 }  
  15.             });  
  16.         </code>  
  17.     </pre>  
  18. </section> 

顯示的效果如下：

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

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

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

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

效果變成下面這樣：

我們匯總下上面的代碼： 

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta  
  6.       name="viewport"  
  7.       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"  
  8.     />  
  9.     <title>reveal.js學(xué)習(xí)</title>  
  10.     <link rel="stylesheet" href="dist/reset.css" />  
  11.     <link rel="stylesheet" href="dist/reveal.css" />  
  12.     <link rel="stylesheet" href="dist/theme/moon.css" />  
  13.     <!-- Theme used for syntax highlighted code -->  
  14.     <link rel="stylesheet" href="plugin/highlight/monokai.css" />  
  15.   </head>  
  16.   <body>  
  17.     <div class="reveal">  
  18.       <div class="slides">  
  19.         <section>Slide 1</section>  
  20.         <section>  
  21.             \[\begin{aligned} 
  22.             \ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}| \  
  23.             \end{aligned} \]  
  24.         </section>  
  25.         <section data-markdown>  
  26.           <textarea data-markdown>  
  27. 推薦系統(tǒng)的主要算法包括：  
  28. - 矩陣分解  
  29. - 線性模型  
  30. - 樹模型  
  31. - 深度學(xué)習(xí)模型                     
  32.                      </textarea  
  33.           >  
  34.         </section>  
  35.         <section data-markdown>  
  36.           <textarea data-markdown>  
  37.                         $MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|$                    
  38.            </textarea>  
  39.         </section>  
  40.         <section>  
  41.             <pre>  
  42.                 <code class="language-javascript">  
  43.                     model.compile({  
  44.                         optimizer: tf.train.sgd(0.000001),  
  45.                         loss: 'meanSquaredError'  
  46.                     });               
  47.                      return model.fitDataset(flattenedDataset, {  
  48.                         epochs: 10,  
  49.                         callbacks: {  
  50.                             onEpochEnd: async (epoch, logs) => { 
  51.                                 console.log(epoch + ':' + logs.loss);  
  52.                             }  
  53.                         }  
  54.                     });  
  55.                 </code>  
  56.             </pre>  
  57.         </section>  
  58.       </div>  
  59.     </div>  
  60.     <script src="dist/reveal.js"></script>  
  61.     <script src="plugin/notes/notes.js"></script> 
  62.     <script src="plugin/markdown/markdown.js"></script>  
  63.     <script src="plugin/highlight/highlight.js"></script>  
  64.     <script src="plugin/math/math.js"></script>  
  65.     <script>  
  66.       // More info about initialization & config: 
  67.       // - https://revealjs.com/initialization/  
  68.       // - https://revealjs.com/config/  
  69.       Reveal.initialize({  
  70.         hash: true,  
  71.         math: {  
  72.           mathjax:  
  73.             "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",  
  74.           config: "TeX-AMS_HTML-full",  
  75.           // pass other options into `MathJax.Hub.Config()`  
  76.           TeX: { Macros: { RR: "{\\bf R}" } },  
  77.         },  
  78.         // Learn about plugins: https://revealjs.com/plugins/  
  79.         plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],  
  80.       });  
  81.     </script>  
  82.   </body>  
  83. </html> 

背景圖片

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

例：       

  1. <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的功能有更好的結(jié)合。

在section中，可以像在普通網(wǎng)頁中一樣寫HTML標(biāo)簽： 

  1. <section>  
  2.     <h3 style="{color: #ffec3d;}">推薦系統(tǒng)的冷啟動(dòng)</h3>  
  3.     <ul>  
  4.         <li>利用熱門數(shù)據(jù)</li>  
  5.         <li>利用用戶注冊(cè)信息</li>  
  6.         <li>利用第三方數(shù)據(jù)</li>  
  7.         <li>利用物品內(nèi)容屬性</li>  
  8.     </ul>  
  9. </section> 

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

比如默認(rèn)字體太大了，我們可以給調(diào)一調(diào)： 

  1. <style>  
  2.     ul {  
  3.         font-size: 18px;  
  4.     }  
  5. </style> 

淡入淡出

結(jié)合html標(biāo)簽，可以指定淡入淡出的效果。這可以通過給標(biāo)簽添加class屬性為fragment實(shí)現(xiàn)。

我們來看個(gè)淡入的例子： 

  1. <section>  
  2.     <h3>推薦系統(tǒng)的冷啟動(dòng)</h3>  
  3.     <ul>  
  4.         <li class="fragment">利用熱門數(shù)據(jù)</li>  
  5.         <li class="fragment">利用用戶注冊(cè)信息</li>  
  6.         <li class="fragment">利用第三方數(shù)據(jù)</li>  
  7.         <li class="fragment">利用物品內(nèi)容屬性</li>  
  8.     </ul>  
  9. </section> 

除了淡入之外，我們還可以對(duì)某項(xiàng)進(jìn)行標(biāo)紅： 

  1. <section>  
  2.      <h3>推薦系統(tǒng)的冷啟動(dòng)</h3>  
  3.      <ul>  
  4.          <li class="fragment highlight-red">利用熱門數(shù)據(jù)</li>  
  5.          <li>利用用戶注冊(cè)信息</li>  
  6.          <li>利用第三方數(shù)據(jù)</li>  
  7.          <li>利用物品內(nèi)容屬性</li>  
  8.      </ul>  
  9.  </section> 

效果如下：

導(dǎo)出為pdf

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

然后我們?cè)儆昧泶鏋閜df格式功能來保存下來就好。

更進(jìn)一步

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

 

責(zé)任編輯：龐桂玉 來源： 前端大全
jsPPT前端
相關(guān)推薦

2020-07-16 08:32:16

JavaScript語言語句

2024-03-08 10:48:10

GoRust高性能

2018-07-31 10:20:54

WindowsDocker Linux

2020-04-14 11:34:15

Linux命令行查看圖像

2011-01-21 13:56:44

SendmailSolaris

2011-06-17 14:36:50

Linux

2017-10-11 16:16:29

弱電pvc管穿線

2024-04-08 10:35:59

JS代碼容量

2023-06-18 23:19:17

ChatGPTPPT方式

2009-12-03 10:27:12

FreeBSD路由器Snort

2022-11-21 10:28:13

FlutterPython

2011-01-04 14:27:50

安裝linux方法

2023-08-22 09:00:00

人工智能Fashion-AI

2015-04-27 11:09:53

GoogleQUIC互聯(lián)網(wǎng)協(xié)議

2018-07-16 10:50:02

注釋javascript前端

2011-12-26 09:34:26

2018-12-04 13:30:28

Javascript編譯原理前端

2010-03-04 16:33:21

Ubuntu cvs

2022-09-20 15:33:35

JavaScriptCSS編程

2022-11-16 08:33:29

監(jiān)聽Spring監(jiān)聽器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)