MDC 语法

MDC（Markdown Components）是 Slidev 在 Markdown 之上扩展的组件语法：允许直接在 Markdown 文本中使用 Vue 组件、应用样式类，而不用写一行 HTML。它让"写 Markdown"与"用组件"无缝衔接。

双冒号前缀 ::

MDC 用双冒号（::）在 Markdown 中引用组件或定义块结构，有三种形态：

形态	语法	用途
行内组件	::component 或 :component	在段落中嵌入组件
块级组件	::component{属性} 到 ::	包裹一段 Markdown
具名插槽	::slot-name{属性}	定义组件插槽内容

行内组件

这是文本，后面是行内组件 ::v-icon{name="rocket"} 继续文字。

块级组件

::v-click
这段内容会在点击后出现。
::

块级组件以 ::组件名 开始，以 :: 结束，中间的内容作为组件的内容传入。

为元素应用样式和类

MDC 允许在组件或块上附加属性与类，实现样式控制：

::card{class="text-red-500" title="重点"}

这是卡片内容，红色文字。

::

• {属性="值"}：传入组件 props 或 HTML 属性
• {class="..."}：附加 UnoCSS 类名
• {style="color:red"}：内联样式

对普通元素加样式

配合 span / div 辅助标记，可以给任意内联或块级内容加样式：

这句话里的 ::span{class="text-blue-500"} 蓝色文字 :: 是重点。

::div{class="grid grid-cols-2 gap-4"}

左侧内容

---

右侧内容

::

在 Markdown 中嵌入 Vue 组件

MDC 的核心价值：任何 Vue 组件都能直接写进 Markdown。

::v-clicks

- 第一项
- 第二项
- 第三项

::

::tweet{id="1234567890"}

::youtube{id="dQw4w9WgXcQ"}

组件支持 props 传递与默认插槽：

::v-click{at="2"}

这段内容在第 2 次点击时出现。

::

也可以不写开头配对，直接使用组件标签风格（等价于 Vue 单文件组件写法）：

<v-click>点击后出现的文本</v-click>

MDC 的 ::组件{} 写法与原生 HTML 标签写法等价，选择一种保持风格统一即可。

辅助标记 span 与 div

MDC 内置两个特殊"组件"用于给纯文本区域添加样式或行为：

辅助标记	语义	典型用法
::span{}	行内元素	给一段文字加色、加粗、加类
::div{}	块级元素	包裹多行内容、布局分组

::div{class="bg-gray-100 p-4 rounded"}

这里是一段带背景与内边距的内容。

- 支持列表
- 支持代码 `code`

::

常用 MDC 组合示例

点击动画 + 布局

::div{class="grid grid-cols-3 gap-4"}

::v-click

第一张卡片

::

::v-click

第二张卡片

::

::v-click

第三张卡片

::

::

图标 + 文字

::icon{name="mdi:github" class="w-8 h-8"}

Github 项目地址：slidevjs/slidev

::

MDC 语法速查

语法	作用
::组件名 到 ::	块级组件包裹
:组件名	行内组件
{属性="值"}	传 props / HTML 属性
{class="..."}	附加样式类
::span{} / ::div{}	行内 / 块级辅助标记
::slot-name{}	具名插槽内容
普通 HTML 标签	与 MDC 等效的另一种写法

MDC 把"内容"与"交互/样式"解耦：内容保持纯 Markdown 可读，交互与视觉交给组件与类，是 Slidev 高表达力与高可维护性的关键。