Powerpoint can be written in JS?

Article/Ali Tao department F(X) Team – Xu Lun

When writing presentations in powerpoint or Keynote, support for code, mathematical formulas, etc., has been a pain. And for the front end students, a CSS power is not used is also a pain point. For those of you who use Markdown to write your documents, reformatting your documents into PPT is also a repetitive task.

So we needed a powerpoint framework based on Web technologies, and previous.js has been around for a long time, and it was released last month, so it’s pretty well maintained, so we picked it for the first step.

Get reveal.js up and running

First clone a copy of previous.js’s latest code:

git clone https://github.com/hakimel/reveal.js
Copy the code

Let’s copy a copy of index.html, say, called study.html:

<! doctypehtml>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the 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>
Copy the code

Run NPM install in the reveal. Js directory and then NPM start to launch a server to view the powerpoint page above. By default, port 8000 is used. If the port is used, you can change it by specifying port 30800.

npm start -- --port=30800
Copy the code

Then by accessing the browser 127.0.0.1:30800 / study. HTML you can see our PPT:

reveal.js step by step

The page above is actually pretty easy to understand. It doesn’t use react or vue frameworks and doesn’t require webPack configuration. The core part of the presentation is very simple, one section for each page of the presentation.

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

Support the markdown

The first great feature of reveal.js is the ability to write presentations directly using MarkDown. The RevealMarkdown plug-in has been loaded in our default HTML template above. So all we need to do is write markdown on the template below.

                <section data-markdown>
                    <textarea data-markdown>                     
                    </textarea>
                </section>
Copy the code

Let’s look at an example:

                <section data-markdown>
                    <textarea data-markdown>The main algorithms of recommendation system include: - matrix factorization - linear model - tree model - deep learning model</textarea>
                </section>
Copy the code

The generated slide is as follows:

Change the subject

If you think white on black is ugly, we can change the subject.

A topic is just CSS, referenced in this statement:

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

Dist /theme/ or one of the other CSS themes below.

For example:

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

The effect looks like this:

Support mathematical formulas

The JS libraries and plugins that support mathematical formulas by default are not included in the default template, so we need to add them.

Let’s first introduce js from the mathematical formula library:

<script src="plugin/math/math.js"></script>
Copy the code

Then Reveal. Initialize adds the configuration of the mathematical formula and introduces the MathJAX library on the CDN:

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

Finally, add the RevealMath plugin to your plugins:

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

The complete code is as follows:

    <script src="plugin/math/math.js"></script>
    <script>
      Reveal.initialize({
        hash: true.math: {
          mathjax:
            "https://cdn.jsdelivr.net/gh/mathjax/[email protected]/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>
Copy the code

Once the plugin is introduced we can write the formula in the slide.

You can write directly in the section:

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

It can also be embedded in markDown:

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

The result is this:

Code highlighting

Code highlighting is supported by default, which we can use in markdown:

The display looks like this:

You can also use the PRE and code tags in HTML to display it directly:

        <section>
            
<pre>
                <code class="language-javascript">Model.pile ({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>
Copy the code

The effect is shown as follows:

The theme can also be changed by changing the CSS under plugin/highlight. For example:

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

By the way, let’s change the theme of reveal.js as well:

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

The effect looks like this:

Let’s summarize the above code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, Initial - scale = 1.0, the maximum - scale = 1.0, /> < span style =" text-scale "href="dist/reset.css" /> <link link rel="stylesheet" href="dist/reset.css" /> 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 The main algorithms of data-MarkDown > recommendation system include: </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/[email protected]/MathJax.js", the 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>Copy the code

The background image

Section supports the data-background-image attribute to specify the background image.

Ex. :

        <section data-background-image="https://cdn.jsdelivr.net/www.jsdelivr.com/000a3f2b6a7baa6ae0f786a251fd105e4b230d8e/img/landing/[email protected]">
        </section>
Copy the code

HTML and CSS

HTML and CSS are also better ways to write presentations than MarkDown. There are more manageable ways. It could also be better integrated with the functionality of reveal.js.

In sections, you can write HTML tags just as you would in a normal web page:

        <section>
            <h3 style="{color: #ffec3d; }">Cold startup of the system is recommended</h3>
            <ul>
                <li>Use hot data</li>
                <li>Use user registration information</li>
                <li>Leveraging third party data</li>
                <li>Leverage the item content attributes</li>
            </ul>
        </section>
Copy the code

We can also write a style property in the header to use in the section.

For example, if the default font is too large, we can adjust it:

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

The fading

In combination with the HTML tag, you can specify the effect of a fade in and out. This can be done by adding a class attribute to the tag as fragment.

Let’s look at an example of a fade in:

        <section>
            <h3>Cold startup of the system is recommended</h3>
            <ul>
                <li class="fragment">Use hot data</li>
                <li class="fragment">Use user registration information</li>
                <li class="fragment">Leveraging third party data</li>
                <li class="fragment">Leverage the item content attributes</li>
            </ul>
        </section>
Copy the code

In addition to fading in, we can also mark something in red:

        <section>
            <h3>Cold startup of the system is recommended</h3>
            <ul>
                <li class="fragment highlight-red">Use hot data</li>
                <li>Use user registration information</li>
                <li>Leveraging third party data</li>
                <li>Leverage the item content attributes</li>
            </ul>
        </section>
Copy the code

The effect is as follows:

Export to PDF

Once the presentation is ready, in addition to viewing it in the browser, we can also export it as a PDF. The method is to add “? Print – PDF “suffix, such as: http://0.0.0.0:30800/study.html? print-pdf

And then we can use the Save to PDF function to save it.

further

In addition to the basic features described above, reveal. Js supports autoplay, custom plug-ins, handling events, and other features that help developers write slides. Believe in bringing new fun things to your slides and making reporting and sharing fun. Enjoy it!

Tao department front end – F-X-Team opened micro blog! (Visible after Posting on Weibo)

More team content awaits you in addition to articles at 🔓