preface

Like this article, I wrote it using Markdown. I believe that you usually use Markdown to write documents, take notes, and turn them into XHtml, Html, etc. Today I will teach you a trick operation: Markdown to write PPT.

Most of your friends do PowerPoint or KeyNote, right? Function is more powerful, but have you ever encountered such a pain point:

  • The format of headings and paragraphs is not uniform, such as font size, line spacing and so on, and then use the format brush to brush one by one.

  • Want to do PPT version control, and then save a variety of copies of the version, such as “version”, “version two”, “final”, “final”, “final version”, “final version”, “final stable version” and so on, I think we have seen similar scenes.

  • You want to insert code, but after you insert it, you find the formatting is all out of order or the highlights are all gone, and then you have to take a screenshot and insert it.

If you want to insert a formula and find that PPT and Keynote are not compatible with Latex or the configuration is a bit cumbersome, you have to re-type it yourself or post screenshots.

  • If you want to insert a cool interactive component, such as embedding a microblog web page real-time access, inserting an interactive component, inserting a music player component, the native PPT function is almost not supported, it all depends on PowerPoint or KeyNote support.

If you encounter these pain points, please make sure to read on. If you don’t, then please read it.

Okay, back to the point. I’ve listed so many pain points. How do I fix them?

Can!!!! The solution is even more lightweight, which is to use Markdown to make PPT!

Have you ever tried Markdown? I don’t think so. Try it, and you’ll find it’s a piece of cake.

How do you do that?

Next, let’s welcome today’s protagonist! It’s called Slidev.

What is Slidev?

In short, Slidev is a library that allows you to write powerpoint in Markdown. It’s based on Node.js and vue.js.

Markdown can be easily converted to PPT, and it supports a variety of beautiful themes, code highlighting, formulas, flow charts, custom web interaction components, and can be easily exported to PDF or directly deployed to a web page.

Installation and startup

Let’s take a look at its basic use.

First you need to install Node.js. Version 14.x or later is recommended

Then we can use the NPM command.

We can then initialize a repository by running the following command:

npm init slidev@latest
Copy the code

This command initializes a repository of Slidev. After running it, it will let us enter and select some options, as shown in the figure below:

In the example above, enter the name of the project folder, for example, I’ll call it SlidevTest.

After a few options are completed, Slidev will launch on local port 3000, as shown in the following figure:

Then we can open the browserhttp://localhost:3000To view a HelloWorld version of PPT, as shown below:

We can click the space to turn the page. The second page shows a regular PPT style, including title, body and list, as shown in the picture:So what does this page look like Markdown? This is the usual Markdown article, which reads as follows:

# What is Slidev? Slidev is a slides maker and presenter designed for developers, Consist of the following features - 📝 ** text-based ** - focus on the content with Markdown, And then style them later - 🎨 **Themable** - theme can be shared and used with NPM packages - 🧑💻 **Developer Friendly** - code highlighting, Live coding with autocompletion - 🤹 **Interactive** - embedding Vue components to enhance your expressions - 🎥 **Recording** - Built-in Recording and Camera View - 📤 **Portable** - Export into PDF, PNGs, Or even a hostable SPA - 🛠 **Hackable** - anything possible on a webpage <br> <br> Read more about [Why Slidev?] (https://sli.dev/guide/why)Copy the code

Isn’t it? We can easily convert it to PPT using the same Markdown syntax.

Use skills

Shortcut key operation

The next page introduces the operation of various shortcut keys, which is very common, such as clicking the space, up and down keys to switch the page, as shown in the picture:More shortcuts can be seenhereSome simple shortcuts are listed below:

  • F: Switch to full screen
  • Right/Space: Next animation or slide show
  • Left: Previous animation or slide
  • Up: Previous slide
  • Down: Next slide
  • O: Switch slides overview
  • D: Switch to Dark mode
  • G: Displays “Go to…”

Code highlighting

Markdown is very friendly to code writing, so it’s not a problem to display the code, such as code highlighting, code alignment, etc., as shown in the figure below:

The code definition on the left side can be written as follows:

# Code Use code snippets and get the highlighting directly! [^1] ```ts {all|2|1-6|9|all} interface User { id: number firstName: string lastName: string role: string } function updateUser(id: number, update: User) { const user = getUser(id) const newUser = {... user, ... update} saveUser(id, newUser) } ```Copy the code

Since it is Markdown, we can specify the language, such as TypeScript, Python, and so on.

Web components

Now comes the cool part, where we can customize some web components and display them.

For example, let’s look at the picture below. The left side shows a number counter, click on the left side of the number will decrease 1, click on the right side of the number will increase 1; In addition, there is a component embedded on the right side of the figure, which shows a Tweet message in the form of a card. We can not only see the content, but also click the buttons like, reply, copy and so on to interact.

These features are not uncommon on the web, but it would be cool if they could be made into powerpoint.So how does this page do that? This actually introduces some vue.js based components. The corresponding Markdown code for this section is as follows:

# Components <div grid="~ cols-2 gap-4"> <div> You can use Vue components directly inside your slides. We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy. ```html <Counter :count="10" /> ``` <! -- ./components/Counter.vue --> <Counter :count="10" m="t-4" /> Check out [the guides](https://sli.dev/builtin/components.html) for more. </div> <div> ```html <Tweet id="1390115482657726468" /> ``` <Tweet ID ="1390115482657726468" scale="0.65" /> </div> </div>Copy the code

Here we can see that we have introduced the Counter, Tweet component, which is the vue.js component, as follows:

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  count: {
    default: 0,
  },
})

const counter = ref(props.count)
</script>

<template>
  <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
    <button
      border="r gray-400 opacity-50"
      p="2"
      font="mono"
      outline="!none"
      hover:bg="gray-400 opacity-20"
      @click="counter -= 1"
    >
      -
    </button>
    <span m="auto" p="2">{{ counter }}</span>
    <button
      border="l gray-400 opacity-50"
      p="2"
      font="mono"
      outline="!none"
      hover:bg="gray-400 opacity-20"
      @click="counter += 1"
    >
      +
    </button>
  </div>
</template>
Copy the code

This is a standard vue.js 3.x based component, all standard vue.js syntax, so if we want to add a component, just write it, as long as the web can support it, everything can be written!

Subject definition

You can also customize the theme in Markdown files by changing the name of the theme.

These are some of the built-in themes, but you can also go to the official documentation to see some of the themes that others have already written,see:.

In addition, we can also write our own theme, all theme styles can be configured through CSS, what you want to have, see:

Formulas and charts

Next comes a very powerful and useful feature, formulas and charts, with support for Latex and flowcharts, as shown here:

For example, the Latex source code above looks like this:

Inline $\sqrt{3x-1}+(1+x)^2$

Block
$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$
Copy the code

The syntax is also the same as Latex.

How does it work? This is because Slidev is integrated with the Katex library by default (see: katex.org/). With the help of Katex, all formulas are not displayed.

Page space

Some friends are curious. Since Markdown is used to write PPT, how is each page divided?

In fact, it is very simple, the most common, with three horizontal line segmentation, such as:

-- Layout: cover -- # 第 1 页 This is the cover page. -- # 第 2 页 The second pageCopy the code

Of course, in addition to using three lines, we can also use a richer definition pattern where we can specify some specific information for each page by using two layers of three lines.

Like this:

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---
Copy the code

The configuration above can be used as an alternative to the three-line layout, which can be used as a page separator to define more page details.

note

Of course, we definitely want to add remarks to PPT, this is also very simple, through the form of comments to the Markdown source file:

-- Layout: cover -- # 第 1 页 This is the cover page. <! -- This is a note -->Copy the code

You can see here that this is actually a specific syntax with annotations.

Speaker profile picture

Of course, there are a lot of cool features. For example, we might want to be in the picture at the same time when we are giving a powerpoint presentation. Slidev also supports that.

Since it’s a web page, and the web page has the ability to capture the camera, the end result could look something like this:

Yes, it is! In the lower right corner is the speaker’s personal portrait, which is embedded in the PPT! Isn’t that cool?

Speech recording

Of course, Slidev also supports speech recording, because it integrates the WebRTC and RecordRTC apis behind it. Some recording configurations are as follows:

So, the recording of the presentation was not a problem at all.

Specific operations can be viewed:

The deployment of

Of course, powerpoint in Slidev can also be deployed, because this is a web page after all.

And deployment is very simple and lightweight, because these are purely static HTML and JavaScript files that can be easily deployed to sites like GitHub Pages, Netlify, etc.

Imagine a scenario like this: other people are still copying PPT before the speech, but you open a browser directly input a url, PPT comes out, people are amazed, they ask you to install the ass?

For details about deployment operations, see:

Let’s look at some PPT that others have already deployed, and just open the web page directly:

  • The demo. The sli. Dev/composable -…
  • Masukin. Link/talks/simpl…

It’s that simple and convenient.

Version control

What? If you want to implement version control, that’s the easiest thing to do.

With Git, version control is no longer a problem.

conclusion

So that’s a brief introduction to Slidev, and I have to say that some of the features are really useful, and I’m a big fan of Markdown and web development, so this comes in handy for me.

Like friends can be one key three even oh, your support is my biggest motivation to update.