slidev-syntax-guide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Syntax Guide

Slidev 语法指南

This skill covers Slidev's extended Markdown syntax, including slide separators, frontmatter, notes, MDC syntax, and all the special formatting features available.

本技能涵盖Slidev的扩展Markdown语法，包括幻灯片分隔符、frontmatter、备注、MDC语法以及所有可用的特殊格式功能。

When to Use This Skill

适用场景

Learning Slidev's Markdown extensions
Writing complex slide content
Using advanced formatting features
Troubleshooting syntax issues
Converting standard Markdown to Slidev format

学习Slidev的Markdown扩展语法
编写复杂的幻灯片内容
使用高级格式功能
排查语法问题
将标准Markdown转换为Slidev格式

Slide Separators

幻灯片分隔符

Basic Separator

基础分隔符

Use three dashes with blank lines:

markdown

undefined

使用带空行的三个短横线：

markdown

undefined

Slide 1

Content here

Slide 2

Separator with Frontmatter

带Frontmatter的分隔符

Add per-slide configuration:

markdown

undefined

添加单张幻灯片的配置：

markdown

undefined

Slide 1

layout: center class: text-blue-500

Centered Blue Slide

undefined

undefined

Frontmatter

Global Configuration (First Slide)

全局配置（第一张幻灯片）

yaml

---
theme: seriph
title: My Presentation
info: |
  ## Presentation Description
  Multi-line info text
colorSchema: auto
highlighter: shiki
drawings:
  persist: false
transition: slide-left
mdc: true
---

yaml

---
theme: seriph
title: My Presentation
info: |
  ## Presentation Description
  Multi-line info text
colorSchema: auto
highlighter: shiki
drawings:
  persist: false
transition: slide-left
mdc: true
---

Per-Slide Configuration

单张幻灯片配置

yaml

---
layout: two-cols
class: my-custom-class
transition: fade
clicks: 3
disabled: false
hide: false
---

yaml

---
layout: two-cols
class: my-custom-class
transition: fade
clicks: 3
disabled: false
hide: false
---

Common Frontmatter Options

常见Frontmatter选项

Option	Type	Description
`layout`	string	Slide layout name
`class`	string	CSS classes
`transition`	string	Slide transition
`background`	string	Background image/color
`clicks`	number	Total clicks for slide
`disabled`	boolean	Disable slide
`hide`	boolean	Hide from navigation
`preload`	boolean	Preload heavy content

选项	类型	描述
`layout`	string	幻灯片布局名称
`class`	string	CSS类
`transition`	string	幻灯片过渡效果
`background`	string	背景图片/颜色
`clicks`	number	幻灯片的总点击次数
`disabled`	boolean	禁用幻灯片
`hide`	boolean	在导航中隐藏
`preload`	boolean	预加载大体积内容

Speaker Notes

演讲者备注

Comment Syntax

注释语法

markdown

undefined

markdown

undefined

My Slide

Visible content

undefined

Visible content

undefined

Notes Position

备注位置

Notes must be at the end of the slide, after all content.

备注必须放在幻灯片末尾，所有内容之后。

MDC Syntax (Markdown Components)

MDC语法（Markdown组件）

Enable in frontmatter:

yaml

---
mdc: true
---

在frontmatter中启用：

yaml

---
mdc: true
---

Inline Styles

内联样式

markdown

This is [important text]{.text-red-500.font-bold}

This has a [tooltip]{title="Hover me!"}

markdown

This is [important text]{.text-red-500.font-bold}

This has a [tooltip]{title="Hover me!"}

Block Styles

块级样式

markdown

::div{.flex.gap-4}
Content inside a flex container
::

::section{#my-section .bg-blue-100}
Section with ID and class
::

markdown

::div{.flex.gap-4}
Content inside a flex container
::

::section{#my-section .bg-blue-100}
Section with ID and class
::

Component Syntax

组件语法

markdown

:Icon{name="carbon:arrow-right" size="24"}

::Alert{type="warning"}
Warning message here
::

markdown

:Icon{name="carbon:arrow-right" size="24"}

::Alert{type="warning"}
Warning message here
::

Lists

列表

Standard Lists

标准列表

markdown

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First
2. Second
3. Third

markdown

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First
2. Second
3. Third

Click-Animated Lists

点击动画列表

markdown

<v-clicks>

- Appears first
- Appears second
- Appears third

</v-clicks>

Or with depth:

markdown

<v-clicks depth="2">

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

</v-clicks>

markdown

<v-clicks>

- Appears first
- Appears second
- Appears third

</v-clicks>

或者设置层级：

markdown

<v-clicks depth="2">

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

</v-clicks>

Images

图片

Basic Image

基础图片

markdown

![Alt text](/images/photo.jpg)

markdown

![Alt text](/images/photo.jpg)

Sized Image

指定尺寸的图片

markdown

![Alt text](/images/photo.jpg){width=400}

markdown

![Alt text](/images/photo.jpg){width=400}

Styled Image

带样式的图片

markdown

![Alt text](/images/photo.jpg){.rounded-lg.shadow-xl}

markdown

![Alt text](/images/photo.jpg){.rounded-lg.shadow-xl}

Background Image (via frontmatter)

背景图片（通过frontmatter）

yaml

---
background: /images/cover.jpg
class: text-white
---

yaml

---
background: /images/cover.jpg
class: text-white
---

Title Over Image

undefined

undefined

链接

Standard Links

标准链接

markdown

[Slidev Documentation](https://sli.dev)

markdown

[Slidev Documentation](https://sli.dev)

Navigation Links

导航链接

markdown

[Go to slide 5](/5)
[Go to slide with ID](#my-slide)

markdown

[Go to slide 5](/5)
[Go to slide with ID](#my-slide)

External Link with New Tab

新标签页打开的外部链接

markdown

<a href="https://sli.dev" target="_blank">Open in new tab</a>

markdown

<a href="https://sli.dev" target="_blank">Open in new tab</a>

Tables

表格

markdown

| Feature | Supported |
|---------|-----------|
| Markdown | ✅ |
| Vue Components | ✅ |
| Animations | ✅ |
| Export | ✅ |

markdown

| Feature | Supported |
|---------|-----------|
| Markdown | ✅ |
| Vue Components | ✅ |
| Animations | ✅ |
| Export | ✅ |

Blockquotes

块引用

markdown

> This is a quote
> spanning multiple lines

> [!NOTE]
> GitHub-style callout

markdown

> This is a quote
> spanning multiple lines

> [!NOTE]
> GitHub-style callout

Horizontal Rules

水平分隔线

markdown

Content above

---

Content below (this also creates a new slide!)

Use

<hr>

for a rule without slide break:

markdown

Content above

<hr>

Content below (same slide)

markdown

Content above

---

Content below (this also creates a new slide!)

使用

<hr>

创建不触发幻灯片切换的分隔线：

markdown

Content above

<hr>

Content below (same slide)

HTML in Markdown

Markdown中的HTML

Inline HTML

内联HTML

markdown

This is <span class="text-red-500">red text</span> inline.

markdown

This is <span class="text-red-500">red text</span> inline.

Block HTML

块级HTML

markdown

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

markdown

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Escaping

转义

Escape Code Block Markers

转义代码块标记

Use more backticks than the content:

markdown

Here's how to write a code block:

```js
const x = 1
```

使用比内容更多的反引号：

markdown

Here's how to write a code block:

```js
const x = 1
```

Escape Frontmatter

转义Frontmatter

markdown

\---
This is not frontmatter
\---

markdown

\---
This is not frontmatter
\---

Slots Syntax

插槽语法

For layouts with multiple content areas:

markdown

---
layout: two-cols
---

适用于多内容区域的布局：

markdown

---
layout: two-cols
---

Left side content

::right::

Right side content

undefined

undefined

Named Slots

命名插槽

markdown

---
layout: my-custom-layout
---

::header::
Header content

::default::
Main content

::footer::
Footer content

markdown

---
layout: my-custom-layout
---

::header::
Header content

::default::
Main content

::footer::
Footer content

Global Layers

全局层

Top Layer (Above All Slides)

顶层（所有幻灯片之上）

Create

global-top.vue

vue

<template>
  <div class="absolute top-0 left-0 p-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>

创建

global-top.vue

：

vue

<template>
  <div class="absolute top-0 left-0 p-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>

Bottom Layer (Below All Slides)

底层（所有幻灯片之下）

Create

global-bottom.vue

vue

<template>
  <div class="absolute bottom-0 right-0 p-4 text-sm">
    © 2025 My Company
  </div>
</template>

创建

global-bottom.vue

：

vue

<template>
  <div class="absolute bottom-0 right-0 p-4 text-sm">
    © 2025 My Company
  </div>
</template>

Scoped Styles

作用域样式

Add CSS for a single slide:

markdown

undefined

为单张幻灯片添加CSS：

markdown

undefined

Styled Slide

undefined

undefined

Special Characters

特殊字符

Emojis

表情符号

markdown

🚀 Rocket launch!
👋 Hello world!

markdown

🚀 Rocket launch!
👋 Hello world!

Icons (with UnoCSS)

图标（搭配UnoCSS）

markdown

<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />

markdown

<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />

Best Practices

最佳实践

Consistent Frontmatter: Use the same structure across slides
Meaningful IDs: Add IDs to slides you'll link to
Organize Notes: Keep speaker notes concise and actionable
Use MDC Sparingly: Don't overuse inline styles
Test Separators: Ensure blank lines around
```
---
```

统一的Frontmatter：在所有幻灯片中使用相同的结构
有意义的ID：为需要链接的幻灯片添加ID
整理备注：保持演讲者备注简洁且实用
适度使用MDC：不要过度使用内联样式
测试分隔符：确保
```
---
```
前后有空行

Common Syntax Errors

常见语法错误

❌ Missing blank lines

markdown

undefined

❌ 缺少空行

markdown

undefined

Slide 1

Slide 2


✓ **Correct**
```markdown


✓ **正确写法**
```markdown

Slide 1

Slide 2


❌ **Invalid YAML**
```yaml
---
theme:default
---

✓ Correct YAML

yaml

---
theme: default
---

❌ Notes before content

markdown

<!--
Notes first
-->


❌ **无效YAML**
```yaml
---
theme:default
---

✓ 正确的YAML

yaml

---
theme: default
---

❌ 备注在内容之前

markdown

<!--
Notes first
-->

Heading


✓ **Notes at end**
```markdown


✓ **备注在末尾**
```markdown

Heading

Content

undefined

Content

undefined

Output Format

输出格式

When writing Slidev content, follow this structure:

markdown

---
[FRONTMATTER: theme, layout, class, etc.]
---

编写Slidev内容时，请遵循以下结构：

markdown

---
[FRONTMATTER: theme, layout, class, etc.]
---

[SLIDE TITLE]

[MAIN CONTENT]

Use Markdown formatting
Include code blocks where relevant
Add images with proper paths

[OPTIONAL: Vue components or HTML]

undefined

[MAIN CONTENT]

Use Markdown formatting
Include code blocks where relevant
Add images with proper paths

[OPTIONAL: Vue components or HTML]

undefined