关于markdown:用Markdown写Html和md也就图一乐真骚操作还得用来做PPT

和这篇文章一样，我就是用 Markdown 写的。置信各位平时也就用 Markdown 写写文档，做做笔记，转成 XHtml、Html 等，明天教大伙一招骚操作：用 Markdown 写 PPT。

绝大多数敌人做 PPT 都是用的 PowerPoint 或者 KeyNote 吧？性能是比拟弱小，但你有没有遇到过这样的痛点：

各种题目、段落的格局不对立，比方字体大小、行间距等等各个页面不太一样，而后得用格局刷来挨个刷一下。
想给 PPT 做版本控制，而后就保留了各种复制版本，比方“一版”、“二版”、“终版”、“最终版”、“最终不改版”、“最终稳固不改版”等等，想必大家都见过相似这样的场景吧。
想插入代码，然而插入之后发现格局全乱了或者高亮全没了，而后不得不截图插入进去。
想插入个公式，而后发现 PPT、Keynote 对 Latex 兼容不太好或者配置略微麻烦，就只能本人从新敲一遍或者贴截图。
想插入一个酷炫的交互组件，比方嵌入一个微博的网页页面实时拜访、插入一个能够交互的组件、插入一个音乐播放器组件，原生的 PPT 性能简直都不反对，这全得依赖于 PowerPoint 或者 KeyNote 来反对才行。

如果你遇到这些痛点，那请你肯定要看上来。如果你没有遇到，那也请你看上来吧。

好，说回正题，我列举了那么多痛点，那这些痛点咋解决呢？

能！甚至解决方案更加轻量级，那就是用 Markdown 来做 PPT！

你试过用 Markdown 写 PPT 吗？没有吧，试试吧，试过之后你就发现下面的性能几乎大海捞针。

具体怎么实现呢？

接下来，就有请明天的配角退场了！它就是——Slidev。

简而言之，Slidev 就是能够让咱们用 Markdown 写 PPT 的工具库，基于 Node.js、Vue.js 开发。

利用它咱们能够简略地把 Markdown 转化成 PPT，而且它能够反对各种难看的主题、代码高亮、公式、流程图、自定义的网页交互组件，还能够不便地导出成 pdf 或者间接部署成一个网页应用。

上面咱们就来理解下它的根本应用啦。

首先咱们须要先装置好 Node.js，举荐 14.x 及以上版本，装置办法见这里

接着，咱们就能够应用 npm 这个命令了。

而后咱们能够初始化一个仓库，运行命令如下：

npm init slidev@latest

这个命令就是初始化一个 Slidev 的仓库，运行之后它会让咱们输出和抉择一些选项，如图所示：

比方上图就是先输出我的项目文件夹的名称，比方这里我取名叫做 slidevtest。

总之一些选项实现之后，Slidev 会在本地 3000 端口上启动，如图所示：

接着，咱们就能够关上浏览器 http://localhost:3000 来查看一个 HelloWorld 版本的 PPT 了，如图所示：

咱们能够点击空格进行翻页，第二页展现了一张惯例的 PPT 的款式，包含题目、注释、列表等，如图所示：

那这一页的 Markdown 是什么样的呢？其实就是十分惯例的 Markdown 文章的写法，内容如下：

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

是不是？咱们只须要用同样格局的 Markdown 语法就能够轻松将其转化为 PPT 了。

再下一页介绍了各种快捷键的操作，这个就很惯例了，比方点击空格、上下左右键来进行页面切换，如图所示：

更多快捷键的操作能够看这里，一些简略的快捷键列举如下：

f：切换全屏
right / space：下一动画或幻灯片
left：上一动画或幻灯片
up：上一张幻灯片
down：下一张幻灯片
o：切换幻灯片总览
d：切换暗黑模式
g：显示“返回 …”

接下来就是代码环节了，因为 Markdown 对代码编写十分敌对，所以展现天然也不是问题了，比方代码高亮、代码对齐等都是惯例操作，如图所示：

那右边的代码定义就间接这么写就行了：

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

因为是 Markdown，所以咱们能够指定是什么语言，比方 TypeScript、Python 等等。

接下来就是十分酷炫的环节了，咱们还能够自定义一些网页组件，而后展现进去。

比方咱们看上面的一张图。右边就出现了一个数字计数器，点击左侧数字就会减 1，点击右侧数字就会加 1；另外图的右侧还嵌入了一个组件，这里显示了一个推特的音讯，通过一个卡片的模式出现了进去，不仅仅能够看内容，甚至咱们还能够点击下方的喜爱、回复、复制等按钮来进行一些交互。

这些性能在网页外面并不稀奇，然而如果能做到 PPT 外面，那感觉就挺酷的。

那这一页怎么做到的呢？这个其实是引入了一些基于 Vue.js 的组件，本节对应的 Markdown 代码如下：

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


<!-- ./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、Tweet 组件，而这个 Counter 就是 Vue.js 的组件，代码如下：

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

这就是一个规范的基于 Vue.js 3.x 的组件，都是规范的 Vue.js 语法，所以如果咱们要增加想要的组件，间接本人写就行了，什么都能实现，只有网页能反对的，通通都能写！

当然，一些主题定制也是十分不便的，咱们能够在 Markdown 文件间接更改一些配置就好了，比方就把 theme 换个名字，整个主题款式就变了，看如下的比照图：

下面就是一些内置主题，当然咱们也能够去官网文档查看一些他人曾经写好的主题，见：。

另外咱们本人写主题也是能够的，所有的主题款式都能够通过 CSS 等配置好，想要什么就能够有什么，见：。

接下来就是一个十分弱小实用的性能，公式和图表，反对 Latex、流程图，如图所示：

比方下面的 Latex 的源代码就是这样的：

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

其语法也是和 Latex 一样的。

其背地是怎么实现的呢？其实是因为 Slidev 默认集成了 Katex 这个库，见：https://katex.org/，有了 Katex 的加持，所有公式的显示都不是事。

有的敌人就好奇了，既然是用 Markdown 写 PPT，那么每一页之间是怎么宰割的呢？

其实很简略，最惯例的，用三条横线宰割就好了，比方：

---
layout: cover
---

# 第 1 页

This is the cover page.

---

# 第 2 页

The second page

当然，除了应用三横线，咱们还能够应用更丰盛的定义模式，能够给每一页制订一些具体信息，就是应用两层三横线。

比方这样：

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

下面这样的配置能够代替三横线，是另一种能够用作页面分隔的写法，借助这种写法咱们能够定义更多页面的具体信息。

当然咱们必定也想给 PPT 增加备注，这个也非常简单，通过正文的模式写到 Markdown 源文件就好了：

---
layout: cover
---

# 第 1 页

This is the cover page.

<!-- 这是一条备注 -->

这里能够看到其实就是用了正文的特定语法。

当然还有很多酷炫的性能，比如说，咱们在讲 PPT 的时候，可能想同时本人也出镜，Slidev 也能够反对。

因为开的是网页，而网页又有捕获摄像头的性能，所以最终成果能够是这样子：

是的没错！右下角就是演讲者的个人头像，它被嵌入到了 PPT 中！是不是十分酷！

当然，Slidev 还反对演讲录制性能，因为它背地集成了 WebRTC 和 RecordRTC 的 API，一些录制配置如下所示：

所以，演讲过程的录制齐全不是问题。

具体的操作能够查看：

当然用 Slidev 写的 PPT 还能够反对部署，因为这毕竟就是一个网页。

而且部署非常简单和轻量级，因为这就是一些纯动态的 HTML、JavaScript 文件，咱们能够轻松把它部署到 GitHub Pages、Netlify 等站点上。

试想这么一个场景：他人在演讲之前还在各种拷贝 PPT，而你关上了一个浏览器间接输出了一个网址，PPT 就进去了，众人惊叹，就问你装不装逼？

具体的部署操作能够查看：

让咱们看几个他人曾经部署好的 PPT，间接网页关上就行了：

https://demo.sli.dev/composab…
https://masukin.link/talks/si…

就是这么简略不便。

什么？你想实现版本控制，那再简略不过了。

Markdown 嘛，配合下业余版本管理工具 Git，版本控制再也不是难题。

以上就是对 Slidev 的简略介绍，的确不得不说有些性能真的十分实用，而且我自身特地喜爱 Markdown 和网页开发，所以这个几乎对我来说太不便了。

喜爱的敌人能够一键三连哦，你们的反对就是我更新的最大能源。

关于markdown:用Markdown写Html和md也就图一乐真骚操作还得用来做PPT

前言

什么是 Slidev？

装置和启动

应用技巧

快捷键操作

代码高亮

网页组件

主题定义

公式和图表

页面分隔

备注

演讲者头像

演讲录制

部署

版本控制

总结