使用 Vue 展示 Markdown 文本可以通过以下几种方法：
方法 1：使用 v-html 指令
可以使用 v-html 指令来渲染 Markdown 文本：
<template><div v-html="markdownText"></div>
</template> <script>export default {data() {return {markdownText: '# Hello, World! \n\n This is a Markdown text.'} } }
</script>这种方法可以直接渲染 Markdown 文本，但是不支持语法高亮和其他高级功能。
方法 2：使用 marked 库
可以使用 marked 库来解析 Markdown 文本并渲染为 HTML：
<template> <div v-html="markedText"></div>
</template> <script> import marked from 'marked' export default { data() { return { markdownText: '# Hello, World! \n\n This is a Markdown text.'} }, computed: { markedText() { return marked(this.markdownText)} } }
</script>这种方法支持语法高亮和其他高级功能，但是需要引入 marked 库。
引入方式：
#在vite.config.js 文件中添加引入optimizeDeps: {include: ['marked'],},如图：
方法 3：使用 vue-markdown 库
可以使用 vue-markdown 库来渲染 Markdown 文本：
<template><vue-markdown :source="markdownText"></vue-markdown>
</template><script>
import VueMarkdown from 'vue-markdown'export default {components: { VueMarkdown },data() {return {markdownText: '# Hello, World! \n\n This is a Markdown text.'}}
}
</script>
这种方法支持语法高亮和其他高级功能，并且不需要引入 marked 库。
方法 4：使用 prismjs 库
可以使用 prismjs 库来渲染 Markdown 文本并支持语法高亮：
<template><div class="markdown-body" v-html="markedText"></div>
</template><script>
import marked from 'marked'
import Prism from 'prismjs'export default {data() {return {markdownText: '# Hello, World! \n\n This is a Markdown text.'}},computed: {markedText() {return marked(this.markdownText)}},mounted() {Prism.highlightAll()}
}
</script>
这种方法支持语法高亮和其他高级功能，但是需要引入 prismjs 库。
