工具：Slidev 使用指南：从入门到精通

Freedom123

发布于 2024-03-29 16:21:58

1.4K00

代码可运行

文章被收录于专栏：DevOpsDevOps

运行总次数：0

代码可运行

简介

幻灯片通过 一个 markdown 文件 编写而成 (默认会使用 ./slides.md)。

你可以像平时编写 markdown 一样使用 Markdown 的相关特性，同时还支持内联的 HTML 和 Vue 组件。也支持使用 Windi CSS 来编写样式。使用 --- 添加分隔符来分隔你的幻灯片。

# Slidev

Hello, World!

---

# Page 2

Directly use code blocks for highlighting

```ts
console.log('Hello, World!')
```

---

# Page 3

You can directly use Windi CSS and Vue components to style and enrich your slides.

<div class="p-3">
  <Tweet id="20" />
</div>

一、辅助功能

1.启动已经存在的slidev

用npx slidev命令可以启动已经存在的slidev项目，示例如下：

# 进入上面已创建的slidev项目目录 
cd slides-project/slide-template 
# 重新启动slidev项目 
npx slidev`

2.导出PDF

安装playwright-chromium

npm i -D playwright-chromium

导出pdf格式幻灯片：

npx slidev export `

默认导出pdf文件时，会禁用动画效果，如果需要将美步点击都生成一页文档，可以使用如下命令：

# slidev >= v0.21
npx slidev export --with-clicks`

3.快捷键功能

f：切换全屏
right / space：下一动画或幻灯片
left / shift space：上一动画或幻灯片
up：上一张幻灯片
down：下一张幻灯片
o：切换幻灯片总览
d：切换暗黑模式
g：显示前往...

4.菜单功能

在预览 slidev 的时候，我们的鼠标在左下角 hover 可以调出菜单栏，其可以实现全屏，前进后退，slides 缩略图，黑暗模式，录屏，标记，编辑模式，文本信息，缩放等功能

二、Markdown语法

#1.扉页及布局

你可以通过将分隔符转换为扉页块 (front matter)，为每张幻灯片指定布局 (layout) 和其他元数据。每个扉页信息都以分隔符 --- 开始，以另一个分隔符 --- 结束。两个分隔符之间的文本是 YAML 格式的数据对象。具体示例如下：

---
layout: cover
---

# Slidev

This is the cover page.

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---

# Page 2

This is a page with the layout `center` and a background image.

---

# Page 3

This is a default page without any additional metadata.

欲了解更多，请参阅自定义章节。

#2.代码块

建立 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮。如你所见，你可以使用 Markdown 风格的代码块，以使得你的代码高亮。

```ts
console.log('Hello, World!')
```

我们支持 Prism 和 Shiki 作为语法高亮器。请参阅语法高亮器获取更多细节。

#特定行高亮

如需针对特定行进行高亮展示，只需在 {} 内添加对应的行号。行号从 1 开始计算。

```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

如果要在多个步骤中改变高亮，你可以用 | 分隔它们。比如：

```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
```

这段代码会先对 a: Ref<number> | number 和 b: Ref<number> | number 进行高亮展示，当你点击幻灯片后，会高亮展示 return computed(() => unref(a) + unref(b))，最后，会对整个块进行高亮展示。你可以在动画指南中了解更多。

#Monaco 编辑器

当你需要在演示文稿中做修改时，只需在语言 id 后添加 {monaco} —— 即可将该代码块变为一个功能齐全的 Monaco 编辑器。

```ts {monaco}
console.log('HelloWorld')
```

欲了解更多，请参阅配置 Monaco。

#3.内联样式

你可以在 Markdown 中直接使用 <style> 标签来覆盖当前幻灯片的样式。

# This is Red

<style>
h1 {
  color: red
}
</style>

---

# Next slide is not affected

Markdown 中的 <style> 标签均为 scoped。如果想覆盖全局样式，请查阅项目结构。

在 Windi CSS 的支持下，你可以直接使用嵌套的 CSS 和指令集。(例如，@apply)

# Slidev

> Hello `world`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

#4.静态资源

和编写 Markdown 的方式一样，你可以使用本地或远程的 URL 的图片。

如果是远程资源，内置的 vite-plugin-remote-assets 将在第一次运行时把它们缓存到磁盘中，即便是大图也能实现立即加载。

![Remote Image](https://sli.dev/favicon.png)

如果是本地资源，请将资源放置到 public 文件夹中并使用 / 开头的 URL 来引用它们。

![Local Image](/pic.png)

如果你想使用自定义的尺寸或样式，可以使用 <img> 标签

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

#5.备注

你也可以为每张幻灯片编写备注。它们将展示在演讲者模式中，供你在演示时参考。

在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注。

---
layout: cover
---

# 第 1 页

This is the cover page.

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

---

# 第 2 页

<!-- 这不是一条备注，因为它在幻灯片内容前 -->

The second page

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

#6.图标

Slidev 允许你在 Markdown 中直接访问几乎所有的开源的图标集。这得益于 vite-plugin-icons 和 Iconify。

图标 ID 遵循 Iconify 的命名规则 {collection-name}-{icon-name}。例如：

使用 Material Design Icons，其规则为 <mdi-account-circle /> -
使用 Carbon，其规则为 <carbon-badge /> -
使用 Unicons Monochrome，其规则为 <uim-rocket /> -
使用 Twemoji，其规则为 <twemoji-cat-with-tears-of-joy /> -
使用 SVG Logos，其规则为 <logos-vue /> -
还有更多…

你可以通过 Icônes 来浏览访问所有可用的图标。

#调整图标样式

你可以像其他 HTML 元素一样对图标的样式进行修改。例如：

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

#7.插槽

自 v0.18 开始可用

一些布局可以使用 Vue 的具名插槽。

例如，在 two-cols 布局中，你可以采用左（default 插槽）右（right 插槽）两列的布局方式。

---
layout: two-cols
---

<template v-slot:default>

# Left

This shows on the left

</template>
<template v-slot:right>

# Right

This shows on the right

</template>

Left

This shows on the left

Right

This shows on the right

我们还为具名插槽提供了一个语法糖 ::name::。下述示例与上述示例的工作原理完全相同。

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

你也可以明确的指定默认插槽，并按自定义顺序展示。

---
layout: two-cols
---

::right::

# Right

This shows on the right

::default::

# Left

This shows on the left

#8.配置

依赖的所有配置都可以在 Markdown 文件中定义，比如：

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

# Slidev

This is the cover page.

欲了解更多，请参阅扉页配置章节。

#9.LaTeX

Slidev 开箱即有对 LaTeX 的支持，得益于 KaTeX。

#内联

在你的 LaTeX 语法左右各加一个 $，用于内联渲染。

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

#块

当使用两个 ($$) 时，会进行块级渲染。这种模式会使用更大的符号，并将结果居中。

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

了解更多：Demo | KaTeX | markdown-it-katex

#10.图表

你也可以在 Markdown 的文本描述中创建图形或图表，得益于 Mermaid。

被标记为 mermaid 的代码块将被转换为图形，例如：

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

你可以向它传递一个配置项来指定缩放和主题。该对象的语法是 JavaScript 的对象字面量，你需要对字符串添加引号 (')，并在键与键之间使用(,)。

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

了解更多：Demo | Mermaid

#11.多个入口点

自 v0.15 开始可用

这意味着你可以将 slides.md 分割成多个文件，并可以按照你的需求组织它们。

slides.md :

# Page 1

This is a normal page

---
src: ./subpage2.md
---

<!-- this page will be loaded from './subpage2.md' -->
Inline content will be ignored

subpage2.md :

# Page 2

This page is from another file

#合并 Frontmatter

你可以为主入口点和外部 markdown 页面提供 frontmatter。如果其中有相同的 key，主入口点的 key 拥有更高的优先级。例如：

slides.md :

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md :

---
layout: cover
background: https://sli.dev/foo.png
---

# Cover

Cover Page

其效果最终与下述页面相同：

---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---

# Cover

Cover Page

#页面复用

有了多入口点的加持，对页面进行重用变得很容易。例如：

---
src: ./cover.md
---

---
src: ./intro.md
---

---
src: ./content.md
---

---
# reuse
src: ./content.md
---

小结

如果你需要的PPT是那种简约风格，演讲内容倾向于有条理性的文字，那么我强烈建议你尝试一下 Slidev。我只用了十多分钟学习语法，然后编写了我的第一个基于 Slidev 的答辩PPT。最后PPT的Github链接和静态展示网址如下，供大家参考：Github地址 | PPT成品展示

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-28，如有侵权请联系 cloudcommunity@tencent.com 删除

布局

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度