--- title: "Markdown 组件" description: "使用 MDC 语法在文档中嵌入 Nuxt UI Prose 组件，包括 Accordion 折叠面板、Badge 徽标、Callout 提示框、Card 卡片、Field 字段文档等，显著提升文档的表现力和交互性，无需编写 Vue 组件代码。" canonical_url: "https://docs.mhaibaraai.cn/docs/typography/mdc-components" --- # Markdown 组件 > 使用 MDC 语法在文档中嵌入 Nuxt UI Prose 组件，包括 Accordion 折叠面板、Badge 徽标、Callout 提示框、Card 卡片、Field 字段文档等，显著提升文档的表现力和交互性，无需编写 Vue 组件代码。 Prose 组件是标准 HTML 排版标签的替代品，在 Markdown 中提供自定义 UI。 **Movk Nuxt Docs** 和 **Nuxt UI** 提供设计精美的 Prose 组件，支持 [MDC 语法](https://content.nuxt.com/docs/files/markdown#mdc-syntax)。 ::prose-note{to="https://ui.nuxt.com/getting-started"} 本页仅列举适合文档的 Prose 组件。所有 Nuxt UI 组件均可在 Markdown 中使用。完整组件列表请查看 [Nuxt UI 文档](https://ui.nuxt.com/getting-started)。 :: ### `Accordion` 使用 `accordion` 和 `accordion-item` 组件在您的内容中嵌入一个 [Accordion](https://ui.nuxt.com/components/accordion)。 **Q: 什么是 Movk Nuxt Docs，它的主要特性是什么？** Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。 **Q: 如何开始使用 Movk Nuxt Docs？** 要开始一个 Movk Nuxt Docs 项目，您只需要一个 content/ 文件夹。您可以查看入门模板以快速开始。 **Q: 什么是 Nuxt UI？** Nuxt UI 是一个包含高质量 Vue 组件、可组合项和工具的集合。 ```mdc ::accordion :::accordion-item{label="什么是 Movk Nuxt Docs，它的主要特性是什么？" icon="i-lucide-circle-help"} Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。 ::: :::accordion-item{label="如何开始使用 Movk Nuxt Docs？" icon="i-lucide-circle-help"} 要开始一个 Movk Nuxt Docs 项目，您只需要一个 `content/` 文件夹。您可以查看入门模板以快速开始。 ::: :::accordion-item{label="什么是 Nuxt UI？" icon="i-lucide-circle-help"} [Nuxt UI](https://ui.nuxt.com/) 是一个包含高质量 Vue 组件、可组合项和工具的集合。 ::: :: ``` ### `Badge` 在 `badge` 组件的默认插槽中使用 Markdown，在您的内容中显示一个 [Badge](https://ui.nuxt.com/components/badge)。 ```mdc ::badge **v3.0.0** :: ``` ### `Callout` 在 `callout` 组件的默认插槽中使用 Markdown，为您的内容添加引人注目的上下文信息。 使用 `icon` 和 `color` 属性来自定义其外观。您还可以传递 [``](https://nuxt.com/docs/api/components/nuxt-link) 组件的任何属性。 此外，您可以使用具有预定义图标和颜色的 `note`、`tip`、`warning` 和 `caution` 快捷方式。 > [!NOTE] > > 这是一些额外的信息。 > [!TIP] > > 这是一个有帮助的建议。 > [!WARNING] > > 请小心此操作，因为它可能产生意外结果。 > [!CAUTION] > > 此操作无法撤销。 ```mdc ::note 这是一些额外信息。 :: ::tip 这是一个有帮助的建议。 :: ::warning 请小心此操作，因为它可能产生意外结果。 :: ::caution 此操作无法撤销。 :: ``` ### `Card` 和 `CardGroup` 在 `card` 组件的默认插槽中使用 Markdown 来突出显示您的内容。 使用 `title`、`icon` 和 `color` 属性来自定义它。您还可以传递 [``](https://nuxt.com/docs/api/components/nuxt-link) 中的任何属性。 使用 `card-group` 组件包装您的 `card` 组件，将它们分组在一起以获得网格布局。 [**Dashboard**](https://github.com/nuxt-ui-templates/dashboard) 一个多列布局的仪表板。 [**SaaS**](https://github.com/nuxt-ui-templates/saas) 具有登陆页面、定价、文档和博客的模板。 [**Docs**](https://github.com/nuxt-ui-templates/docs) 一个带有 @nuxt/content 的文档。 [**Landing**](https://github.com/nuxt-ui-templates/landing) 一个可用作起点的登陆页面。 ```mdc :::card-group ::card --- title: Dashboard icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/dashboard target: _blank --- 一个多列布局的仪表板。 :: ::card --- title: SaaS icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/saas target: _blank --- 包含落地页、定价、文档和博客的完整模板。 :: ::card --- title: Docs icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/docs target: _blank --- 基于 `@nuxt/content` 的文档站点。 :: ::card --- title: Landing icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/landing target: _blank --- 一个可用作起点的登陆页面。 :: ::: ``` ### `Collapsible` 使用 `collapsible` 组件包装您的内容以在内容中显示 [Collapsible](https://ui.nuxt.com/components/collapsible)。 | Prop | Default | Type | | --- | --- | --- | | `name` | | `string` | | `size` | `md` | `string` | | `color` | `neutral` | `string` | ```mdc ::collapsible | Prop | Default | Type | |---------|-----------|--------------------------| | `name` | | `string`{lang="ts-type"} | | `size` | `md` | `string`{lang="ts-type"} | | `color` | `neutral` | `string`{lang="ts-type"} | :: ``` ### `Field` 和 `FieldGroup` `field` 是一个在内容中显示的属性或参数。您可以通过 `field-group` 将它们分组在列表中。 Default to false - Enables analytics for your project (coming soon). Default to false - Enables blob storage to store static assets, such as images, videos and more. Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction Default to false - Enables SQL database to store your application's data. ```mdc ::field-group ::field{name="analytics" type="boolean"} Default to `false` - Enables analytics for your project (coming soon). :: ::field{name="blob" type="boolean"} Default to `false` - Enables blob storage to store static assets, such as images, videos and more. :: ::field{name="cache" type="boolean"} Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` :: ::field{name="database" type="boolean"} Default to `false` - Enables SQL database to store your application's data. :: :: ``` ### `Icon` 使用 `icon` 组件在内容中显示 [Icon](https://ui.nuxt.com/components/icon)。 ```mdc :icon{name="i-simple-icons-nuxtdotjs"} ``` ### `Kbd` 使用 `kbd` 组件在内容中显示 [Kbd](https://ui.nuxt.com/components/kbd)。 ```mdc :kbd{value="meta"} :kbd{value="K"} ``` ### `Tabs` 使用 `tabs` 和 `tabs-item` 组件在内容中显示 [Tabs](https://ui.nuxt.com/components/tabs)。 ````mdc ::tabs{.w-full} :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :::: ``` :::: :::tabs-item{icon="i-lucide-eye" label="Preview"} :::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. ::::: ::: :: ```` ### `Steps` 用 Steps 组件包装您的标题以显示步骤列表。 使用 `level` 属性来定义哪个标题将用于步骤。 #### Start a fresh new project ```bash [Terminal] npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template ``` #### Run your dev server ```bash [Terminal] pnpm run dev ``` ````mdc ::steps{level="4"} #### 启动一个全新项目 ```bash [Terminal] npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template ``` #### 启动您的开发服务器 ```bash [Terminal] pnpm run dev ``` :: ```` ## Sitemap See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.