使用 Vue 展示 Markdown 文本

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