Back to Details

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

Slide 1

Content here
Content here

Slide 2

Slide 2

More content
undefined
More content
undefined

Separator with Frontmatter

带Frontmatter的分隔符

Add per-slide configuration:
markdown
undefined
添加单张幻灯片的配置：
markdown
undefined

Slide 1

Slide 1

layout: center class: text-blue-500

layout: center class: text-blue-500

Centered Blue Slide

Centered Blue Slide

undefined
undefined

Frontmatter

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

OptionTypeDescription
layout
stringSlide layout name
class
stringCSS classes
transition
stringSlide transition
background
stringBackground image/color
clicks
numberTotal clicks for slide
disabled
booleanDisable slide
hide
booleanHide from navigation
preload
booleanPreload heavy content
选项类型描述
layout
string幻灯片布局名称
class
stringCSS类
transition
string幻灯片过渡效果
background
string背景图片/颜色
clicks
number幻灯片的总点击次数
disabled
boolean禁用幻灯片
hide
boolean在导航中隐藏
preload
boolean预加载大体积内容

Speaker Notes

演讲者备注

Comment Syntax

注释语法

markdown
undefined
markdown
undefined

My Slide

My Slide

Visible content
<!-- These are speaker notes. - Point to remember - Another point Supports **Markdown** formatting. --> 
undefined
Visible content
<!-- These are speaker notes. - Point to remember - Another point Supports **Markdown** formatting. --> 
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

Title Over Image

undefined
undefined

Links

链接

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

Left side content

::right::
::right::

Right side content

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

Styled Slide

<style> h1 { color: #2563eb; font-size: 3em; } </style> 
undefined
<style> h1 { color: #2563eb; font-size: 3em; } </style> 
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

最佳实践

  1. Consistent Frontmatter: Use the same structure across slides
  2. Meaningful IDs: Add IDs to slides you'll link to
  3. Organize Notes: Keep speaker notes concise and actionable
  4. Use MDC Sparingly: Don't overuse inline styles
  5. Test Separators: Ensure blank lines around 
    ---
  1. 统一的Frontmatter：在所有幻灯片中使用相同的结构
  2. 有意义的ID：为需要链接的幻灯片添加ID
  3. 整理备注：保持演讲者备注简洁且实用
  4. 适度使用MDC：不要过度使用内联样式
  5. 测试分隔符：确保
    ---
    前后有空行

Common Syntax Errors

常见语法错误

❌ Missing blank lines
markdown
undefined
❌ 缺少空行
markdown
undefined

Slide 1

Slide 1

Slide 2

Slide 2


✓ **Correct**
```markdown

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

Slide 1

Slide 1

Slide 2

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

Heading


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

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

Heading

Heading

Content
<!-- Notes at the end --> 
undefined
Content
<!-- Notes at the end --> 
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]

[SLIDE TITLE]

[MAIN CONTENT]
  • Use Markdown formatting
  • Include code blocks where relevant
  • Add images with proper paths
[OPTIONAL: Vue components or HTML]
<!-- [SPEAKER NOTES] - Key points to mention - Timing notes --> 
undefined
[MAIN CONTENT]
  • Use Markdown formatting
  • Include code blocks where relevant
  • Add images with proper paths
[OPTIONAL: Vue components or HTML]
<!-- [SPEAKER NOTES] - Key points to mention - Timing notes --> 
undefined