前言

都 22 年了，你还在使用 PowerPoint 来做 PPT 吗？额……好像我自己就是……

其实去年就关注到 slidev 了，但是也没用花很多时间去研究他。

刚好最近公司组织分享要写个 PPT，突然想到了这个 markdown 写 PPT 的神器，作为一个每天都和 markdown 打交道的人，写写 markdown 就可以做个 PPT，这简直起飞～，而且使用 markdown 就意味着可以通过 git 等工具来控制版本，那么那些改10、改20……的 PPT 就不会再见到了。

太棒了，开干开干！

Slidev

首先，先来了解一下 Slidev，github 上也是一个 19.2k 的高赞项目，再翻翻官网。

有很多功能丰富、通用、所见即所得的幻灯片制作工具，例如 Microsoft PowerPoint 和 Apple Keynote。它们非常适合制作带有动画、图表和许多其他内容的漂亮幻灯片，同时非常直观且易于学习。那么，为什么还要费心制作 Slidev 呢？

Slidev 旨在为开发人员提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、富有表现力和吸引力。

使用所见即所得编辑器时，很容易被样式选项分散注意力。Slidev 通过分离内容和视觉效果来解决这个问题。这使您可以一次专注于一件事，同时还可以重用社区中的主题。Slidev 并不寻求完全取代其他幻灯片构建器。相反，它专注于迎合开发者社区。

slidev官网.jpg

安装启动

slidev 使用起来也非常非常简单，只需要 node 大于 14 并运行下面这个命令，就会再当前目录下创建一个项目文件夹，而幻灯片展示的内容就是该项目文件夹下的 slides.md 文件。

npm init slidev
复制代码

slidev安装启动.png
这样我们的项目就启动完成了，接下来按照提示在浏览器打开 http://localhost:3030 就可以查看 PPT 模版了。

基于 markdown

首页如下图所示，看上去确实很酷炫。

slidev首屏.jpg

markdown 代码如下：

# 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 <carbon:arrow-right class="inline"/>
  </span>
</div>

<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">
    <carbon:edit />
  </button>
  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
    class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
    <carbon-logo-github />
  </a>
</div>


<!--
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)
-->

---
复制代码

每个页面的标题是 markdown 语法的 # 来表示，也就是 html 的 <h1> 标签。可以直接在 markdown 中添加文字，相当于 <p> 标题，也可以直接在 markdown 中插入 web 标签以达到更高的自定义程度。

也可以用 css 来自定义当前页的一些内容的样式，比如添加 class 类亦或是在底下添加 <style> 标签来更改标题或者其他内容的样式。

每一张 PPT 之间是使用三条横线分割 --- 来区分各个页面，同时 slidev 在注入了一个全局的 $slidev，可以在 markdown 和 vue 模板中的任何地方使用 “Mustache”语法（也就是插值表达式 {{}} ）访问，使用 $slidev 的钩子来进行你想要的操作，比如切换页面 <button @click="$slidev.nav.next">Next Page</button> 等。

而每张幻灯片的最后一个注释块将被视为幻灯片的笔记。在演示者模式也就是你讲解 PPT 时，可以和幻灯片一起可见和编辑。

slidev首屏演示者模式.jpg

功能特点

我们可以点击空格或者按下键盘右箭头键进行翻页，第二页主要展示了 slidev 的一些功能特点。

slidev第二页.jpg

# 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>
复制代码

具体可以查看官网的特征描述，不得不说功能还是很强大的，有些功能下面也会讲到。

特征

?基于 Markdown – 使用您喜欢的编辑器和工作流程

?‍?开发者友好– 内置语法高亮、实时编码等。

? Themable – 主题可以与 npm 包共享和使用

? Stylish – Windi CSS按需实用程序，易于使用的嵌入式样式表

?交互式– 无缝嵌入 Vue 组件

?演示者模式– 使用另一个窗口，甚至你的手机来控制你的幻灯片

?绘图– 在幻灯片上绘图和注释

? LaTeX – 内置 LaTeX 数学方程支持

?图表– 创建带有文字描述的图表

?图标– 直接访问任何图标集中的图标

? Editors – 集成编辑器，或者VS Code 的扩展

?录音– 内置录音和相机视图

?便携– 导出为 PDF、PNG，甚至是可托管的 SPA

⚡️快速– 由Vite提供支持的即时重新加载

? Hackable – 使用 Vite 插件、Vue 组件或任何 npm 包

而这一页基本上是使用了 markdown 语法来完成整个 PPT 的标题、正文等，想要了解具体 markdown 语法可以查看 Markdown 中文网。短短几行代码，一个简单而又完整的页面就呈现出来了。

快捷导航

第三页主要是带来一些快捷键的基本操作，告诉我们可以通过空格和上下左右键来进行页面切换等，将鼠标移到页面的左下角，会出现一块导航栏区域，同样是一些快捷操作键。

slidev第三页.jpg

更多的快捷键以及导航栏功能可以查看官网导航介绍页：

slidev快捷键.jpg

代码高亮

第四页就展示了 slidev 强大的代码高亮功能，可以在页面中直接插入代码和图像，只要是 markdown 支持的语法片段都可以展现出来。具体语法格式可以查看官网语法页面。

而图片可以在标题顶部设置 layout 以及 image 的 url 来展现。

slidev第四页.jpg

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

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

<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>
复制代码

组件嵌入

slidev 另一个强大的功能就是直接在幻灯片中使用 vue 插入动画和自定义组件，而这正是普通 PPT 都不具备的功能，这不就是我们 Vuer 的福音吗！

而第五页主要展现一些自定义组件以及 slidev 的内置组件，大家也可以自己去创造和探索。

slidev第五页.jpg

# 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>
复制代码

上图的 Counter 是一个 vue3 完成的自定义组件，具体代码如下，这不就是我们平时写的通用功能吗！！！

只要在你的项目根目录下创建一个目录 components/，把你自定义的 Vue 组件放在它下面，然后你就可以在你的 markdown 文件中使用它的同名了，还可以进行相应的点击操作。

<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>
复制代码

可配置主题

第六页就是告诉我们在 Slidev 中更改主题也是非常容易的，只需要在 frontmatter 也就是 markdown 顶部中添加 theme 字段就可以了，就和我们在掘金写文章在顶部设置主题如出一辙。

slidev 提供了多种官方主题可供使用，同时还提供了一个社区给各位大佬制作优秀的自定义主题，只要你想也是可以做出一款人见人爱的主题，具体操作参见官网 sli.dev/themes/writ…

slidev第六页.jpg

除了设定主题外，slidev 同样提供了多种配置，让你可以更加随心所欲的操纵你的页面，以下是该幻灯片的顶部配置，包括提供背景图、文字居中、文字高亮等等，非常实用。

# 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

---
复制代码

动画支持

正常 PPT 支持的动画，slidev 同样拥有，不仅可以使用 v-click 指令或 <v-click> 组件添加点击动画，同时 slidev 内置了@vueuse/motion，@vueuse/motion 也是我之前非常喜欢使用的一个库，可以使用 v-motion 指令对任何元素通过设置启始和结束位置从而进行应用运动。

slidev第七页.gif

第七页的具体 markdown 代码如下，使用了一连串的 @vueuse/motion 动画从而达到特定效果。

slidev 会预加载下一张幻灯片以提高性能，这意味着动画可能会在您导航到页面之前开始。所以在页面上方添加 preload: false 属性可以禁用特定幻灯片的预加载。

---
preload: false
---

# Animations

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

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>
```

<div class="w-60 relative mt-6">
  <div class="relative w-40 h-40">
    <img
      v-motion
      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-square.png"
    />
    <img
      v-motion
      :initial="{ y: 500, x: -100, scale: 2 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-circle.png"
    />
    <img
      v-motion
      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
      :enter="final"
      class="absolute top-0 left-0 right-0 bottom-0"
      src="https://sli.dev/logo-triangle.png"
    />
  </div>

  <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
  </div>
</div>

<!-- 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
  }
}
</script>

<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>
复制代码

LaTeX 支持

第八页同样展示了 slidev 的另一个强大的功能，内置 LaTeX 数学方程支持，由 KaTeX 提供支持，可以使用 $ 或者 $$ 来渲染数学公式，行内公式用一对 $ 包起来就可以展现，一整块公式块可以用一对 $$ 包起来，也是相当方便的。

slidev第八页.jpg

# 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)
复制代码

图表支持

而各种图表在 slidev 中使用，也是极为的方便，第九页就告诉我们还可以从 Markdown 中的文本描述创建各种图表和图形。

我们可以用 mermaid 插入流程图等，而标记为的代码块 mermaid 将自动转换为图表。

slidev第九页.jpg

# 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">

```mermaid {scale: 0.5}
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
```

```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> 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)
复制代码

导出 PDF

除了以上 demo 介绍的内容外，slidev 还提供了导出为 PDF 或 PNG 的功能。

试想一下，当你在一个没有安装 npm 的环境，同样可以使用 PDF 来演示你的 PPT，提供了多种的可能。

首先需要安装依赖

npm i -D playwright-chromium
复制代码

接下来再使用以下命令将幻灯片导出为 PDF
```
npm run export
复制代码
```
然后就会在当前目录下生成一个 slides-export.pdf 了

其他功能

还有一些其他功能还没来得及探究，包括：

演示录制：slidev 有一个内置的录制和相机视图，可以用来轻松地录制演示文稿
演示绘图：单击工具栏中的图标可以在演示时随心所欲地标记和绘图，也支持与触控笔一起使用
静态托管：可以和操作 vue 一样通过 build 指令，打包成静态资源，然后轻松的在服务器上部署。并通过站点去直接访问
……

写在最后

不得不说，使用 vue + slidev 来写个 PPT 确实很轻松，也满足了我对于写个简单 PPT 的基本要求，喜欢的小伙伴千万不要错过啦。

如果你也感兴趣的话，那就去自己动手操作操作，让你的 markdown 更生动更精彩吧！

文章版权归作者所有，未经允许请勿转载。

THE END

前端

BRVAH的BaseRecyclerViewAdapterHelper与MVVM模式优雅结合，Recyclerview如何在Databinding中快捷、方便地

GoPivotal Pivotal Grails Resources插件权限许可和访问控制漏洞

react-redux

中秋节一波很稳的车（喵咪社区）

天呐！惊人的Springboot测试.Springboot测试类之@RunWith注解

Microsoft Windows 2000 RunAs Service服务拒绝漏洞

【每日一拳】打在 vue+slidev 用 markdown 轻轻松松完成 PPT 实践上

前言