Nuxt Content：如何正确渲染Markdown文件内容？

• 要渲染Markdown正文，你需要使用 <ContentRenderer> 组件。
• ContentDoc 组件仅负责获取文档数据（包括frontmatter和解析后的body结构），不会自动渲染正文，需配合 ContentRenderer 完成正文输出。

示例代码1：结合useAsyncData与ContentRenderer #

<template>
  <article>
    <h1>{{ doc.title }}</h1>
    <p class="year">发布年份：{{ doc.year }}</p>
    <!-- 渲染Markdown正文 -->
    <ContentRenderer :value="doc.body" />
  </article>
</template>

<script setup>
const { data: doc } = await useAsyncData('article-design', () => {
  return queryContent('/article/design').findOne()
})
</script>

示例代码2：使用ContentDoc插槽配合ContentRenderer #

<template>
  <ContentDoc path="/article/design">
    <template #default="{ doc }">
      <h1>{{ doc.title }}</h1>
      <p class="year">发布年份：{{ doc.year }}</p>
      <ContentRenderer :value="doc.body" />
    </template>
  </ContentDoc>
</template>

核心说明：doc.body 是Nuxt Content解析Markdown后生成的AST结构，ContentRenderer 会将该结构转换为对应的HTML内容输出，从而显示Markdown正文。

内容的提问来源于stack exchange，提问作者dev_dev