mcpField
S
slidev-syntax-guide

slidev-syntax-guide

github.com/yoanbernabeu文档处理41280 次安装39 周前更新
代码仓库

关于 slidev-syntax-guide

slidev-syntax-guide 是面向 Slidev 演示文稿作者的语法指南，讲解 Markdown 扩展及幻灯片配置。它覆盖分隔符、Frontmatter、演讲者备注、MDC 和布局插槽等语法，也介绍常见错误的排查。

主要功能

  1. 01使用幻灯片分隔符与 Frontmatter
  2. 02编写演讲者备注
  3. 03使用 MDC 与组件语法
  4. 04配置布局插槽和全局层
  5. 05处理 Markdown、HTML 与样式

适用场景

  1. 01学习 Slidev 扩展 Markdown
  2. 02为单页设置布局和过渡
  3. 03构建含组件的复杂幻灯片
  4. 04排查分隔符或 YAML 错误

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-syntax-guide

安装后在 Claude Code 中输入/slidev-syntax-guide确认已加载。

详细介绍

Slidev 语法指南

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

何时使用此技能

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

幻灯片分隔符

基本分隔符

使用三个短横线，并在前后留空行：

# Slide 1

Content here

---

# Slide 2

More content
带 Frontmatter 的分隔符

添加单张幻灯片的配置：

# Slide 1

---
layout: center
class: text-blue-500
---

# Centered Blue Slide

Frontmatter

全局配置（第一页）
---
theme: seriph
title: My Presentation
info: |
  ## Presentation Description
  Multi-line info text
colorSchema: auto
highlighter: shiki
drawings:
  persist: false
transition: slide-left
mdc: true
---
单张幻灯片配置
---
layout: two-cols
class: my-custom-class
transition: fade
clicks: 3
disabled: false
hide: false
---
常见 Frontmatter 选项
选项类型描述
layout字符串幻灯片布局名称
class字符串CSS 类
transition字符串幻灯片切换效果
background字符串背景图片／颜色
clicks数字幻灯片的总点击次数
disabled布尔值禁用幻灯片
hide布尔值从导航中隐藏
preload布尔值预加载较重的内容

演讲者备注

注释语法
# My Slide

Visible content
备注位置

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

MDC 语法（Markdown 组件）

在 frontmatter 中启用：

---
mdc: true
---
行内样式
This is [important text]{.text-red-500.font-bold}

This has a [tooltip]{title="Hover me!"}
块样式
::div{.flex.gap-4}
Content inside a flex container
::

::section{#my-section .bg-blue-100}
Section with ID and class
::
组件语法
:Icon{name="carbon:arrow-right" size="24"}

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

列表

标准列表
- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First
2. Second
3. Third
点击动画列表
<v-clicks>

- Appears first
- Appears second
- Appears third

</v-clicks>

也可以指定深度：

<v-clicks depth="2">

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

</v-clicks>

图片

基本图片
![Alt text](/images/photo.jpg)
调整尺寸的图片
![Alt text](/images/photo.jpg){width=400}
设置样式的图片
![Alt text](/images/photo.jpg){.rounded-lg.shadow-xl}
背景图片（通过 frontmatter）
---
background: /images/cover.jpg
class: text-white
---

# Title Over Image

链接

标准链接
[Slidev Documentation](https://sli.dev)
导航链接
[Go to slide 5](/5)
[Go to slide with ID](#my-slide)
在新标签页中打开的外部链接
<a href="https://sli.dev" target="_blank">Open in new tab</a>

表格

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

引用块

> This is a quote
> spanning multiple lines

> [!NOTE]
> GitHub-style callout

水平线

Content above

---

Content below (this also creates a new slide!)

如需添加不会分隔幻灯片的水平线，请使用 <hr>：

Content above

<hr>

Content below (same slide)

Markdown 中的 HTML

行内 HTML
This is <span class="text-red-500">red text</span> inline.
块级 HTML
<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

转义

转义代码块标记

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

Here's how to write a code block:

```js
const x = 1
```
转义 Frontmatter
\---
This is not frontmatter
\---

插槽语法

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

---
layout: two-cols
---

# Left side content

::right::

# Right side content
命名插槽
---
layout: my-custom-layout
---

::header::
Header content

::default::
Main content

::footer::
Footer content

全局图层

顶层图层（位于所有幻灯片上方）

创建 global-top.vue：

<template>
  <div class="absolute top-0 left-0 p-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>
底层图层（位于所有幻灯片下方）

创建 global-bottom.vue：

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

作用域样式

为单张幻灯片添加 CSS：

# Styled Slide

<style>
h1 {
  color: #2563eb;
  font-size: 3em;
}
</style>

特殊字符

表情符号
🚀 Rocket launch!
👋 Hello world!
图标（使用 UnoCSS）
<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />

最佳实践

  1. 保持 Frontmatter 一致：在所有幻灯片中使用相同的结构
  2. 使用有意义的 ID：为要添加链接的幻灯片添加 ID
  3. 整理备注：让演讲者备注简洁且便于执行
  4. 谨慎使用 MDC：不要过度使用行内样式
  5. 测试分隔符：确保 --- 前后有空行

常见语法错误

❌ 缺少空行

# Slide 1
---
# Slide 2

✓ 正确

# Slide 1

---

# Slide 2

❌ 无效的 YAML

---
theme:default
---

✓ 正确的 YAML

---
theme: default
---

❌ 备注位于内容之前


# Heading

✓ 备注位于末尾

# Heading

Content

输出格式

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

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

评论

支持 Markdown