preface

Are you still using PowerPoint for PowerPoint after 22 years? The forehead… It’s like I’m…

I actually had my eye on Slidev last year, but didn’t spend much time studying him.

Recently, the company organized to share the need to write a PPT, and suddenly came up with the magic tool for markdown to write a PPT. As a person who deals with Markdown every day, I can write markdown to make a PPT, which is like taking off. And using Markdown means that you can control the version through git and other tools, so those changes 10, 20… I won’t see you again.

That’s great! Let’s go! Let’s go!

Slidev

First, check out Slidev, another 19.2K project on Github, and check out Slidev’s website.

There are plenty of feature-rich, general-purpose, WYSIWYG slide creation tools, such as Microsoft PowerPoint and Apple Keynote. They are great for making beautiful slides with animations, charts, and many other things, while being very intuitive and easy to learn. So why bother making Slidev?

Slidev aims to provide flexibility and interactivity for developers to make their presentations more interesting, expressive, and engaging by using tools and techniques they are already familiar with.

When using the WYSIWYG editor, it’s easy to get distracted by style options. Slidev solves this problem by separating content from visuals. This allows you to focus on one thing at a time, while also reusing topics in the community. Slidev does not seek to completely replace other slide builders. Instead, it focuses on catering to the developer community.

Installing the

Slidev is also very, very easy to use, just need node > 14 and run the following command to create a project folder in the current directory. The slides show the slides of the slides.

npm init slidev
Copy the code

Now that our project is started, open it in your browser as promptedhttp://localhost:3030You can view the PPT template.

Based on the markdown

The front page, shown below, looks really cool.

The markdown code looks like this:

# Welcome to Slidev

Presentation slides for developers

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
Press Space for next page 
        
<div class="abs-br m-6 flex gap-2">
  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 ! border-none ! hover:text-white">

         
         <! -- The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs] (https://sli.dev/guide/syntax.html#notes) -- -- > -- -- -Copy the code

The title of each page is represented by a # in markdown syntax, which is the HTML < H1 > tag. You can add text directly to markdown, equivalent to a

title, or you can insert Web labels directly into Markdown for a higher degree of customization.

You can also use CSS to customize the style of some content on the current page, such as adding a class class or adding a

Each slide is separated by three horizontal lines to separate the pages, and Slidev injects a global $slidev, You can access “Mustache” (aka interpolation {{}}) anywhere in markdown and vue templates, using the $slidev hook to do whatever you want,

The last comment block of each slide will be regarded as the notes of the slide. In presenter mode, which is when you’re talking about powerpoint, you can see and edit the slides.

Functional features

You can click the space or press the right arrow key on your keyboard to scroll through the page. The second page shows some of Slidev’s features.

# 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) <! -- You can have`style` tag in markdown to override the style for the current page.
Learn more: https://sli.dev/guide/syntax#embedded-styles
-->

<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>
Copy the code

For details, you can check the feature description of the official website. It has to be said that the function is still very powerful, and some functions will be described below.

Characteristics of the

  • 📝 Based on Markdown – use your favorite editor and workflow
  • 🧑💻 developer-friendly – built-in syntax highlighting, real-time coding, and more.
  • 🎨 Themable – Themes can be shared and used with NPM packages
  • 🌈 Theatre-windi CSS on-demand utility, easy to use embedded style sheets
  • 🤹 Interactive – Seamlessly embed Vue components
  • 🎙 Presenter mode – Use another window or even your phone to control your slides
  • 🎨 drawing – Drawing and annotating on slides
  • 🧮 LaTeX – Built-in support for LaTeX mathematical equations
  • 📰 Charts – Create charts with text descriptions
  • 🌟 ICONS – Direct access to any icon set icon
  • 💻 Editors – Integration editor, or an extension to VS Code
  • 🎥 Recording – Built-in recording and camera view
  • 📤 portable – export to PDF, PNG, or even a hosted SPA
  • ⚡️ Fast – Instant reloading supported by Vite
  • 🛠 Hackable – Use Vite plug-ins, Vue components, or any NPM package

This page basically uses Markdown syntax to complete the title and body of the entire PPT. If you want to know the specific Markdown syntax, you can check Markdown’s Chinese website. In just a few lines of code, a simple and complete page appears.

Quick navigation

The third page is mainly about the basic operation of some shortcut keys, telling us that we can switch the page through the space and up and down keys, etc. When the mouse moves to the lower left corner of the page, a navigation bar area will appear, which is also some shortcut keys.

For more shortcuts and navigation bar functions, see the navigation page on the official website:

Code highlighting

The fourth page shows slidev’s powerful code highlighting feature, which allows you to insert code and images directly into the page, displaying any syntax snippets supported by Markdown. For details, see the syntax page on the official website.

The image can be displayed by setting layout and image URL at the top of the title.

---
layout: image-right
image: https://source.unsplash.com/collection/94734566/1920x1080
---

# CodeUse 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) } ```

<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="# 564" width="3" arrowSize="1" />

[^ 1] : [Learn More] (https://sli.dev/guide/syntax.html#line-highlighting)

<style>
.footnotes-sep {
  @apply mt-20 opacity-10;
}
.footnotes {
  @apply text-sm opacity-75;
}
.footnote-backref {
  display: none;
}
</style>
Copy the code

Embedded components

Another great feature of Slidev is the ability to insert animations and custom components directly into slides using Vue, which is not available in normal powerpoint.

Page 5 focuses on custom components and slidev’s built-in components that you can create and explore on your own.

# 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

The Counter in the figure above is a customized component completed by VUE3, the specific code is as follows, isn’t this the general function we usually write?!!

Just create a directory components/ under the root of your project, place your custom Vue components under it, and then you can use its name in your Markdown files and click on it accordingly.

<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

Configurable topic

Page 6 shows how easy it is to change the theme in Slidev by adding the theme field at the top of FrontMatter (Markdown), just like setting the theme at the top of your article in Nuggets.

Slidev provides a wide range of official themes to use, as well as a community for creating your own custom themes. See slidev /themes/writ…

In addition to setting themes, Slidev also provides a variety of Settings that allow you to manipulate your page more freely. Here’s the top Settings for the slide, including background images, text centering, text highlighting, and more.

# try also 'default' to start simple
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://source.unsplash.com/collection/94734566/1920x1080
# apply any windi css classes to the current slide
class: 'text-center'
# https://sli.dev/custom/highlighters.html
highlighter: shiki
# show line numbers in code blocks
lineNumbers: false
# some information about the slides, markdown enabled
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev] (https://sli.dev)
# persist drawings in exports and build
drawings:
  persist: false

---
Copy the code

Animation support

Slidev also has normal PPT supported animation, not only can use v-click command or < V-click > component to add click animation, slidev also has @vueuse/motion built-in, Vueuse/Motion is also a library I used to love. You can use the V-motion directive to apply motion to any element by setting the start and end positions.

The detailed Markdown code on page 7 follows, using a series of @vueuse/ Motion animations to achieve the desired effect.

Slidev preloads the next slide to improve performance, which means the animation might start before you navigate to the page. So adding the preload: false attribute at the top of the page disables preloading for specific slides.

---
preload: false
---

# Animations

Animations are powered by [@vueuse/motion] (https://motion.vueuse.org/).

```html 
      

        Slidev 
      
 ```

<div class="w-60 relative mt-6">
  <div class="relative w-40 h-40">
   
  <div
    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
    v-motion
    :initial="{ x: -80, opacity: 0}"
    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
Slidev  <! -- vue script setup scripts can be directly used in markdown, and will only affects current page --><script setup lang="ts">
const final = {
  x: 0,
  y: 0,
  rotate: 0,
  scale: 1,
  transition: {
type: 'spring', damping: 10, stiffness: 20, mass: 2 } } 
<div
  v-motion
  :initial="{ x:35, y: 40, opacity: 0}"
  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">

[Learn More] (https://sli.dev/guide/animations.html#motion)

</div>
Copy the code

LaTeX support

Page 8 also shows another powerful feature of Slidev. Built-in LaTeX mathematical equation support, supported by KaTeX, can render mathematical formulas using $or $$, inline formulas can be displayed wrapped in a pair of $, whole formula blocks can be wrapped in a pair of $$, It’s also quite convenient.

# LaTeX

LaTeX is supported out-of-box powered by [KaTeX] (https://katex.org/).

<br>

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}
$$

<br>

[Learn more] (https://sli.dev/guide/syntax#latex)
Copy the code

The chart support

The use of charts in Slidev is also extremely convenient, and page 9 shows that you can also create charts and graphs from text descriptions in Markdown.

We can insert flowchart with Mermaid, etc., and the code block labeled MERMAID will be automatically converted to a diagram.

# Diagrams

You can create diagrams / graphs from textual descriptions, directly in your Markdown.

<div class="grid grid-cols-3 gap-10 pt-4 -mb-6">

' 'Avi {scale: 0.5} sequenceDiagram Alice-> Avi -> Avi Note over Alice,John: A typical interaction ```

```mermaid {theme: 'neutral', scale: 0.8} [Text] graph TD B > C {Decision} C -- - > | One | D. [Result] 1 C - > | Two | E. [Result] 2 ` ` `

```plantuml {scale: 0.7} @startuml package "Some Group" {HTTP - [First Component] [Another Component]} node "Other Groups" {FTP - [Second  Component] [First Component] --> FTP } cloud { [Example 1] } database "MySql" { folder "This is my folder" { [Folder 3]  } frame "Foo" { [Frame 4] } } [Another Component] --> [Example 1] [Example 1] --> [Folder 3] [Folder 3] --> [Frame 4] @enduml ```

</div>

[Learn More] (https://sli.dev/guide/syntax.html#diagrams)
Copy the code

Export PDF

In addition to the above demo, Slidev also provides the ability to export to PDF or PNG.

Imagine if you are in an environment where NPM is not installed and you can also use PDF to present your PPT, providing a variety of possibilities.

  1. The dependencies need to be installed first

    npm i -D playwright-chromium
Copy the code

  2. Next use the following command to export the slide show as a PDF

    npm run export
Copy the code

  3. A defece-export.pdf is then generated in the current directory

Other features

There are a few other features we haven’t explored yet, including:

  • Presentation recording: Slidev has a built-in recording and camera view that can be used to easily record presentations
  • Demo Drawing: Clicking on the icon in the toolbar allows you to mark and draw as you like during a demo, and can also be used with a stylus
  • Static hosting: can pass as vUEbuildDirectives, packaged as static resources, are then easily deployed on the server. And access it directly through the site
  • …

Write in the last

I have to say, using Vue + slidev to write a PPT is really easy, but also meet my basic requirements for writing a simple PPT, like friends do not miss it.

If you are interested, go and make your Markdown more lively and exciting.