---
title: "Markdown 组件"
description: "使用 MDC 语法在文档中嵌入 Nuxt UI Prose 组件，包括 Accordion 折叠面板、Badge 徽标、Callout 提示框、Card 卡片、Field 字段文档等，显著提升文档的表现力和交互性，无需编写 Vue 组件代码。"
seo_title: "MDC Components"
seo_description: "Embed Nuxt UI Prose components in Movk Nuxt Docs with MDC syntax for accordions, badges, callouts, cards, fields, and richer Markdown content."
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){rel="[\"nofollow\"]"}。

<prose-note to="https://ui.nuxt.com/getting-started">本页仅列举适合文档的 Prose 组件。所有 Nuxt UI 组件均可在 Markdown 中使用。完整组件列表请查看 [Nuxt UI 文档](https://ui.nuxt.com/getting-started){rel="[\"nofollow\"]"}。</prose-note>### `Accordion`

使用 `accordion` 和 `accordion-item` 组件在您的内容中嵌入一个 [Accordion](https://ui.nuxt.com/components/accordion){rel="[\"nofollow\"]"}。

**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){rel="[\"nofollow\"]"}。

```mdc
::badge
**v3.0.0**
::
```

### `Callout`

在 `callout` 组件的默认插槽中使用 Markdown，为您的内容添加引人注目的上下文信息。

使用 `icon` 和 `color` 属性来自定义其外观。您还可以传递 [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="[\"nofollow\"]"} 组件的任何属性。

此外，您可以使用具有预定义图标和颜色的 `note`、`tip`、`warning` 和 `caution` 快捷方式。

> \[\!NOTE\]
> 
> 这是一些额外的信息。

> \[\!TIP\]
> 
> 这是一个有帮助的建议。

> \[\!WARNING\]
> 
> 请小心此操作，因为它可能产生意外结果。

> \[\!CAUTION\]
> 
> 此操作无法撤销。

```mdc
::note
这是一些额外信息。
::

::tip
这是一个有帮助的建议。
::

::warning
请小心此操作，因为它可能产生意外结果。
::

::caution
此操作无法撤销。
::
```

### `Card` 和 `CardGroup`

在 `card` 组件的默认插槽中使用 Markdown 来突出显示您的内容。

使用 `title`、`icon` 和 `color` 属性来自定义它。您还可以传递 [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link){rel="[\"nofollow\"]"} 中的任何属性。

使用 `card-group` 组件包装您的 `card` 组件，将它们分组在一起以获得网格布局。

**Dashboard**

一个多列布局的仪表板。

**SaaS**

具有登陆页面、定价、文档和博客的模板。

**Docs**

一个带有 

@nuxt/content

 的文档。

**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){rel="[\"nofollow\"]"}。

| 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){rel="[\"nofollow\"]"}。

```vue
<template>
  <icon name=i-simple-icons-nuxtdotjs />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:icon{name="i-simple-icons-nuxtdotjs"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  name</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sna2s />
  i-simple-icons-nuxtdotjs</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

### `Kbd`

使用 `kbd` 组件在内容中显示 [Kbd](https://ui.nuxt.com/components/kbd){rel="[\"nofollow\"]"}。

```vue
<template>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:kbd{value="meta"} :kbd{value="K"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  meta</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   :kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  K</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

### `Tabs`

使用 `tabs` 和 `tabs-item` 组件在内容中显示 [Tabs](https://ui.nuxt.com/components/tabs){rel="[\"nofollow\"]"}。

```vue
<template>
  <__flatten>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre>
  <blockquote>
  <p>
  [!NOTE]</p>
  <p>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.</p></blockquote></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::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.
      :::::
    :::
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  tabs</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  .w-full</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sMK4o>
    :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sSs5K />
  i-lucide-code</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Code</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sfazB>
      ```</span>
  <span class=sJsPd>
  mdc
  </span></span>
  <span class=line>
  <span class=sJsPd>
      ::::callout
  </span></span>
  <span class=line>
  <span class=sJsPd>
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sJsPd>
      ::::
  </span></span>
  <span class=line>
  <span class=sfazB>
      ```
  </span></span>
  <span class=line>
  <span class=sMK4o>
    ::::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
    :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sWAvP />
  i-lucide-eye</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Preview</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sMK4o>
      :::::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sTEyZ>
      :::::
  </span></span>
  <span class=line>
  <span class=sMK4o>
    :::
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

### `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](/sitemap.md) for all pages.