简介

漂亮的排版组件和实用工具，用于使用 Nuxt UI 样式化您的内容。

Nuxt UI 为提供的Prose 组件带来了美观、一致的样式@nuxtjs/mdc。Nuxt MDC 模块将您的 markdown 转换为语义化的 Vue 组件，Nuxt UI 应用其设计系统，使您的内容自动适应您应用程序的主题。

有关 Nuxt Content 的安装和设置，请查看Content 集成指南。

用法

由 Nuxt MDC 的 prose 组件提供支持、由 Nuxt UI 样式化的排版系统，提供了多种方式来渲染样式化内容

Markdown 渲染 - 使用 ContentRenderer 或 MDC 组件来渲染具有自动 prose 样式的 markdown
直接 Vue 用法 - 在您的 Vue 模板中直接导入和使用 prose 组件

使用 ContentRenderer

最简单的方式 - 当使用 <ContentRenderer> 组件时，您的 markdown 会自动进行样式化<ContentRenderer>组件

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
</script>

<template>
  <ContentRenderer :value="page" />
</template>

当您编写 markdown 时，Nuxt MDC 会自动将每个元素映射到一个样式化的 prose 组件

# Heading → <ProseH1> （带可访问的锚点链接）
**bold** → <ProseStrong> （根据您的主题进行样式化）
`code` → <ProseCode> （带语法高亮）
...以及所有其他 markdown 语法都会被渲染成相应的 prose 组件，确保设计和主题的一致性。

使用 MDC 组件

为了更好地控制 markdown 渲染，请使用<MDC>组件

<script setup lang="ts">
const value = `# Hello World

Learn more about the **MDC** component in the [documentation](https://github.com/nuxt-modules/mdc).
`
</script>

<template>
  <MDC :value="value" />
</template>

当您需要执行以下操作时，请使用此方法：

渲染来自 API 或数据库等外部源的 markdown 内容
将动态或自定义数据注入您的 markdown
构建灵活、动态的内容系统
安全地处理和显示用户生成的 markdown

使用 Prose 组件

在 Vue 模板中直接使用 prose 组件以获得最大的控制权

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

MDC 语法

您可以使用以下方法在 markdown 文件中包含 Vue 组件MDC 语法.

常规 markdown，带有粗体和斜体文本。

使用 MDC 组件实现丰富的交互！

使用 pnpm add @nuxt/ui 进行安装

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

Regular markdown with **bold** and *italic* text.

::callout{icon="i-lucide-rocket" color="primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @nuxt/ui to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::

主题

在您的应用配置中覆盖任何 prose 组件样式

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
        }
      },
      p: {
        base: 'leading-7 [&:not(:first-child)]:mt-6'
      }
    }
  }
})

标题和文本

精美的标题、段落、文本格式和链接，以获得最佳可读性。