estel_docs/content/docs/1.简单文档/3.writing/1.markdown.md

title, description, navigation

title	description	navigation
Markdown	如何使用MDC语法编写文档。	icon lucide:arrow-big-down

::card-group ::card

title: MDC语法 to: https://content.nuxt.com/docs/files/markdown#mdc-syntax target: _blank icon: lucide:arrow-big-down

在Nuxt Content文档中阅读详细的MDC使用指南。 ::

::card

title: 组件 to: /components/prose icon: lucide:box

查看shadcn-docs-nuxt提供的MDC组件。 :: ::

VS Code集成

MDC扩展

Nuxt MDC是一个VS Code扩展，为MDC语法提供语法高亮和自动完成功能。

启动VS Code快速打开 :shortcut{value="Ctrl"} + :shortcut{value="P"}，粘贴以下命令，然后按回车。

ext install Nuxt.mdc

启用组件元数据自动完成

::alert 需要 Nuxt.mdc >= 0.3.1 ::

::steps{:level="4"}

VSCode设置

{
  "mdc.enableComponentMetadataCompletions": true // [!code ++]
}

安装 nuxt-component-meta 模块

将nuxt-component-meta依赖添加到您的项目中：

:pm-install{name="nuxt-component-meta"}

将nuxt-component-meta添加到nuxt.config.ts的modules部分，并可选择配置模块：

export default defineNuxtConfig({
  modules: ['nuxt-component-meta'],
});

一旦您的项目构建完成或在开发服务器上运行，扩展将自动扫描您的项目以获取组件元数据，并根据发现的组件提供建议，无需额外配置。 ::

技巧

从目录中隐藏标题

:badge[0.4.7]{variant="outline"}

将标题的 id 设置为 hide-toc 将从目录中隐藏该标题。

:h2[脚注]{id="hide-toc"}