slidev-syntax-guide by yoanbernabeu/slidev-skills
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-syntax-guide本技能涵盖 Slidev 的扩展 Markdown 语法,包括幻灯片分隔符、前置元数据、演讲者备注、MDC 语法以及所有可用的特殊格式化功能。
使用三个破折号并空行:
# Slide 1
Content here
---
# Slide 2
More content
添加每页幻灯片的配置:
# Slide 1
---
layout: center
class: text-blue-500
---
# Centered Blue Slide
---
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
---
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 选项 | 类型 | 描述 |
|---|---|---|
layout | string | 幻灯片布局名称 |
class | string | CSS 类 |
transition | string | 幻灯片过渡效果 |
background | string | 背景图片/颜色 |
clicks | number | 幻灯片的总点击次数 |
disabled | boolean | 禁用幻灯片 |
hide | boolean | 在导航中隐藏 |
preload | boolean | 预加载重内容 |
# My Slide
Visible content
<!--
These are speaker notes.
- Point to remember
- Another point
Supports **Markdown** formatting.
-->
备注必须放在幻灯片的末尾,所有内容之后。
在前置元数据中启用:
---
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>

{width=400}
{.rounded-lg.shadow-xl}
---
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)
This is <span class="text-red-500">red text</span> inline.
<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
```
\---
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!
<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />
--- 周围有空行❌ 缺少空行
# Slide 1
---
# Slide 2
✓ 正确
# Slide 1
---
# Slide 2
❌ 无效的 YAML
---
theme:default
---
✓ 正确的 YAML
---
theme: default
---
❌ 备注在内容之前
<!--
Notes first
-->
# Heading
✓ 备注在末尾
# Heading
Content
<!--
Notes at the end
-->
编写 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]
<!--
[SPEAKER NOTES]
- Key points to mention
- Timing notes
-->
每周安装量
79
代码仓库
GitHub 星标数
22
首次出现
2026年1月25日
安全审计
已安装于
opencode65
codex62
gemini-cli62
github-copilot60
cursor58
amp53
This skill covers Slidev's extended Markdown syntax, including slide separators, frontmatter, notes, MDC syntax, and all the special formatting features available.
Use three dashes with blank lines:
# Slide 1
Content here
---
# Slide 2
More content
Add per-slide configuration:
# Slide 1
---
layout: center
class: text-blue-500
---
# Centered Blue Slide
---
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
---
| 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 |
# My Slide
Visible content
<!--
These are speaker notes.
- Point to remember
- Another point
Supports **Markdown** formatting.
-->
Notes must be at the end of the slide, after all content.
Enable in 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>
Or with depth:
<v-clicks depth="2">
- Parent 1
- Child 1.1
- Child 1.2
- Parent 2
- Child 2.1
</v-clicks>

{width=400}
{.rounded-lg.shadow-xl}
---
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!)
Use <hr> for a rule without slide break:
Content above
<hr>
Content below (same slide)
This is <span class="text-red-500">red text</span> inline.
<div class="grid grid-cols-2 gap-4">
<div>Column 1</div>
<div>Column 2</div>
</div>
Use more backticks than the content:
Here's how to write a code block:
```js
const x = 1
```
\---
This is not frontmatter
\---
For layouts with multiple content areas:
---
layout: two-cols
---
# Left side content
::right::
# Right side content
---
layout: my-custom-layout
---
::header::
Header content
::default::
Main content
::footer::
Footer content
Create global-top.vue:
<template>
<div class="absolute top-0 left-0 p-4">
<img src="/logo.png" class="h-8" />
</div>
</template>
Create global-bottom.vue:
<template>
<div class="absolute bottom-0 right-0 p-4 text-sm">
© 2025 My Company
</div>
</template>
Add CSS for a single slide:
# Styled Slide
<style>
h1 {
color: #2563eb;
font-size: 3em;
}
</style>
🚀 Rocket launch!
👋 Hello world!
<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />
---❌ Missing blank lines
# Slide 1
---
# Slide 2
✓ Correct
# Slide 1
---
# Slide 2
❌ Invalid YAML
---
theme:default
---
✓ Correct YAML
---
theme: default
---
❌ Notes before content
<!--
Notes first
-->
# Heading
✓ Notes at end
# Heading
Content
<!--
Notes at the end
-->
When writing Slidev content, follow this structure:
---
[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]
<!--
[SPEAKER NOTES]
- Key points to mention
- Timing notes
-->
Weekly Installs
79
Repository
GitHub Stars
22
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode65
codex62
gemini-cli62
github-copilot60
cursor58
amp53
新闻稿撰写工具:使用 inference.sh CLI 进行事实核查与专业新闻稿创作
7,700 周安装
Outlook自动化指南:通过Rube MCP与Composio工具包实现邮件、日历、联系人管理
83 周安装
WhoDB数据库助手:简化数据库操作,支持SQL查询、模式探索与数据导出
93 周安装
Xcode MCP 设置指南:连接 Claude、Cursor、VS Code 等 AI 助手到 Xcode 开发环境
101 周安装
Kotlin Multiplatform AGP 9.0 迁移指南:解决插件兼容性与项目重构
71 周安装
Vercel安全与访问控制:RBAC、SSO、部署保护、防火墙、审计日志配置指南
98 周安装
Better Auth Core - TypeScript身份验证库,支持无状态会话和社交登录
104 周安装
disabled | boolean | Disable slide |
hide | boolean | Hide from navigation |
preload | boolean | Preload heavy content |