MDC 语法速览

为什么需要 MDC

Nuxt Content 使用 MDC（Markdown Components） 语法，在标准 Markdown 之上允许直接书写 Vue 组件。它是本站绝大多数「富文本」能力的语法基础：提示框、标签、折叠、对话、选项卡等，都是普通组件，只是换了一种写法。

块级组件

块级组件用双冒号包裹，内部是内容与插槽：

写法如下：

::quote{icon="tabler:quote"}
块级组件适合包裹一段内容，例如引用、提示或分栏。
::

行内组件

行内组件用单冒号，写在句子中间：

行内组件 像这样 可以嵌入段落，也可以带属性和插槽内容。

行内组件 :badge[像这样]{link="/2026/content-components"} 可以嵌入段落。

属性

属性写在花括号里，值用引号包裹；布尔属性直接写名字：

属性演示

属性既可以是字符串，也可以是布尔值或表达式。

::link-card
---
icon: https://picsum.photos/seed/mdclink/100
title: 属性演示
description: 字符串属性也可以写成一行 YAML。
link: https://content.nuxt.com/docs/files/markdown#mdc-syntax
---
::

具名插槽

用 #slotName 声明具名插槽，嵌套组件时需要正确的缩进：

样式类与行内样式

MDC 支持用 {.class} 给元素加类名，也支持行内 style：

• 阴影回声
• 故事感只在 story 版式生效
• 像这样直接指定颜色——

- [阴影回声]{.text-repeat}
- [像这样直接指定颜色——]{style="color: #00bb66"}

富文本增强

Markdown 的其余能力由 remark / rehype 插件提供：脚注¹、表格、任务列表、数学公式与代码高亮等。