当前位置：首页 > news >正文

使用 Vue 展示 Markdown 文本

news 来源：原创 2025/5/22 6:31:16

使用 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 库。