使用 nuxtjs 内容显示字符串中的 markdown 内容

Question

假设，我的数据库中有一个包含 markdown 内容的字符串，从数据库中获取该字符串后，如何在不使用 md 扩展的情况下使用 nuxtjs 内容模块显示它？ 谁能告诉我该怎么做？

Answer 1

根据您的要求，您不必仅使用 nuxt 内容模块来渲染一些 markdown，而是可以使用类似 @nuxtjs/markdownit

的内容

将其添加到您的项目后，您可以使用

$md

使用以下配置在文档中呈现 Markdown

nuxt.config.js

{
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    runtime: true // Support `$md()`
  }
}

页面/component.vue

<template>
  <div v-html="$md.render(model)"></div>
</template>

<script>
export default {
  data() {
    return {
      model: '# Hello World!'
    }
  }
}
</script>

Answer 2

感谢 tony19 的回答，我能够创建简单的组件，它动态地使用 Markdown 内容呈现传递的字符串。也许它对某人也有用！

./components/MarkdownStringRenderer.vue

<script setup>
import markdownParser from "@nuxt/content/transformers/markdown"

const props = defineProps({
  markdownString: {
    type: String,
    required: true,
  }
});

const record = ref("");

watchEffect(async () => {
  await markdownParser.parse("custom.md", props.markdownString).then((md) => record.value = md);
});
</script>

<template>
  <ContentRendererMarkdown :value="record" v-if="record" />
</template>

组件使用示例：

<MarkdownStringRenderer :markdownString="description" />

每次

description

更改时，Markdown 都会重新渲染。

Answer 3

感谢上面Hazadus的回答。

这是我使用 nuxt3 typescript 进行修改的方法：

<template>
ContentRendererMarkdown(v-if="record" :value="record")
</template>

<script setup lang="ts">
// @ts-expect-error avoid lint error
import markdownParser from '@nuxt/content/transformers/markdown'

const props = defineProps<{
  markdownString: String
}>()

const record = ref<string>('')

watch(
  () => props.markdownString,
  async () => {
    await markdownParser
      .parse('customId', props.markdownString)
      .then((md: string) => (record.value = md))
  },
)
</script>