居然能够用 JS 写 PPT?

admin

 居然能够用 js 写 PPT

用powerpoint或者keynote写演示文稿,对于代码、数学公式等的声援不息是个痛点。而且对于前端同学来说,一身的css功力用不上也是个痛点。对于行使markdown来写文档的同学来说,将文档转成ppt必要重新排版也是件重复性的做事量。

于是吾们必要一个基于web技术的ppt框架,reveal.js在这个周围成名已久了,而且上个月还有发布新版本,维护得还蛮益,第一步吾们就选它了。

将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>  选举体系的主要算法包括:  - 矩阵分解  - 线性模型  - 树模型  - 深度学习模型                           </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>  选举体系的主要算法包括:  - 矩阵分解  - 线性模型  - 树模型  - 深度学习模型                                          </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;}">选举体系的冷启动</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>选举体系的冷启动</h3>      <ul>          <li class="fragment">行使炎门数据</li>          <li class="fragment">行行使户注册新闻</li>          <li class="fragment">行使第三方数据</li>          <li class="fragment">行使物品内容属性</li>      </ul>  </section

除了淡入之表,吾们还能够对某项进走标红:

<section>       <h3>选举体系的冷启动</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声援自动播放、自制插件、声援处理事件等等有利于开发人员写slides的特性。信任能给你的slides带来新的益玩的东西,将汇报与分享变成有趣。Enjoy it!

鸿蒙官方战略配相符共建——HarmonyOS技术社区


Powered by 2021十大排行最污直播-日韩4438x全国最大-十大污的软 @2018 RSS地图 HTML地图

Copyright 站群 © 2013-2021 365建站器 版权所有