Skip to content

语法

Slidev 的幻灯片是用 Markdown 文件编写的,称为 Slidev Markdown。演示文稿由一个 Slidev Markdown 作为入口点,该文件默认为 ./slides.md,你可以将文件路径作为参数传递给 CLI 命令 来使用别的文件。

在 Slidev Markdown 中,不仅可以像平常一样使用 基本的 Markdown 功能,Slidev 还提供了额外的功能来增强你的幻灯片。本节介绍了 Slidev 引入的语法。请确保你了解基本的 Markdown 语法后再阅读本指南。

分隔符

使用在两侧留有空行的 --- 来分隔幻灯片:

md
# Title

Hello, **Slidev**!

---

# Slide 2

使用代码块来高亮代码:

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

---

# Slide 3

使用 UnoCSS 类和 Vue 组件来为你的幻灯片添加样式和丰富内容:

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

Frontmatter 和 Headmatter

在每张幻灯片的开头,你可以添加一个可选的 frontmatter 来配置幻灯片。第一个 frontmatter 块称为 headmatter,可以配置整个幻灯片集。其余的是用于单个幻灯片的 frontmatters。headmatter 或 frontmatter 中的文本应是 YAML 格式的对象。例如:

md
---
theme: seriph
title: Welcome to Slidev
---

# 第一页

第一页的 frontmatter 也是整个演示文稿的 headmatter

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

# 第二页

本页的布局是 `center`,背景是一张图片

---

# 第三页

本页没有 frontmatter

---
src: ./pages/4.md  # 本页只包含 frontmatter
---

---

# 第五页

具体的配置项请参考 演示文稿的配置每个幻灯片的配置 部分。

你还可以安装 VSCode 扩展来使 headmatter 更易读:

✨ VS Code 拓展

还可以使用另一种 frontmatter 格式:

✨ 代码块形式的 frontmatter

备注

每张幻灯片的末尾的注释块(若有),将被视为幻灯片的备注。它们将在 📖 用户界面 中显示,以供您在演示过程中参考。

md
---
layout: cover
---

# 第一页

封面页

<!-- 这是一段 **备注** -->

---

# 第二页

<!-- 这不是备注,因为它不在幻灯片末尾 -->

第二页的内容

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

备注中也支持渲染 Markdown 和 HTML。

了解更多:
✨ 笔记的动画标记

代码块

创建 Slidev 的一个重要原因是需要在幻灯片中完美地显示代码。在 Slidev 中,你可以使用 Markdown 风格的代码块来高亮你的代码。

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

Slidev 使用 Shiki 作为语法高亮器。有关更多详细信息,请参阅 配置 Shiki

与代码块相关的更多内容:

✨ Line Numbers
✨ 代码块最大高度
✨ 高亮代码行
✨ Monaco 编辑器
✨ Monaco 代码运行器
✨ 可写的 Monaco Editor
✨ Shiki Magic Move
✨ TwoSlash 集成
✨ 引入代码片段

Latex 公式块

Slidev 支持用于渲染数学和化学公式的 LaTeX 公式块:

✨ LaTeX

图表

Slidev 支持使用 Mermaid.jsPlantUML,以文本形式创建图表:

✨ Mermaid.js 图表
✨ PlantUML 图表

MDC 语法

MDC 语法是将样式和类应用于元素的最简单方法:

✨ MDC 语法

Scoped CSS

Scoped CSS 可以用来为你的幻灯片添加样式:

✨ 幻灯片专属样式

导入幻灯片

✨ 引入幻灯片

Released under the MIT License.