如何在Nuxt 3 Content 2的MDC中从YAML输出标准Markdown/HTML？

问题原因 #

你通过MDC YAML传递的copy是带换行的字符串，但Vue的双大括号{{ }}会将所有空白（包括换行）合并为单个空格，导致内容显示为单行。同时，你尝试的<slot>和<ContentSlot>方法不适用，因为copy是组件props而非MDC插槽内容。

解决方案：解析Markdown渲染多行文本 #

Nuxt Content 2内置了Markdown解析工具，可直接将带换行的字符串解析为HTML段落：

1. 修改组件脚本 #

在组件的<script setup>中引入并使用Nuxt Content的Markdown解析器：

<script setup>
import { useMarkdownParser } from '#content/utils'
import { computed } from 'vue'

const props = defineProps({
    title: { type: String },
    copy: { type: String },
    media: { type: Object },
    link: { type: Object }
})

// 解析copy为HTML
const parseMarkdown = useMarkdownParser()
const parsedCopy = computed(() => parseMarkdown(props.copy))
</script>

2. 修改模板渲染 #

将原来的{{ copy }}替换为v-html绑定解析后的内容：

<div class="prose prose-xl lg:prose-2xl leading-normal lg:leading-snug italic max-w-none" v-html="parsedCopy"></div>

效果说明 #

YAML中用空行分隔的段落会被自动解析为<p>标签，换行也会被正确处理，同时保留你设置的prose类样式。

备选方案：仅转换换行为<br> #

如果不需要Markdown解析，只是要保留换行，可直接将字符串中的换行符替换为<br>：

<script setup>
import { computed } from 'vue'

const props = defineProps({
    // ... 其他props
})

const formattedCopy = computed(() => props.copy.replace(/\n/g, '<br>'))
</script>

<!-- 模板中 -->
<div class="..." v-html="formattedCopy"></div>

内容的提问来源于stack exchange，提问作者kb.works