Vue3 Options API下如何将Markdown字符串转为普通HTML？

方案一：改用更可靠的Markdown解析库 #

vue-markdown-render对复杂Markdown语法支持有限，推荐使用marked（轻量易用）或markdown-it（功能全面），以下是marked的实现步骤：

1. 安装依赖：

npm install marked @types/marked --save

2. 修改Chat.vue代码：

<script lang="ts">
import { GPTMessage } from '../types/GPTMessage';
import { ChatAPI } from '../lib/gpt';
import { marked } from 'marked';

export default {
  data() {
    return {
      chatHistory: [] as GPTMessage[],
      input: "" as string
    }
  },
  methods: {
    async askGpt(): Promise<void> {
      this.chatHistory.push({ role: "user", content: this.input })
      this.input = ""
      const resp = await ChatAPI(this.chatHistory)
      this.chatHistory.push({ role: resp.role, content: resp.content })
    },
    handleChange(event: any) {
      this.input = event.target.value
    },
    renderMarkdown(content: string): string {
      return marked.parse(content)
    }
  }
}
</script>

<template>
  <div class="flex flex-col h-screen justify-between mb-auto">
    <div class="mb-auto">
      <div v-for="message in chatHistory" v-html="renderMarkdown(message.content)"></div>
    </div>
    <div class="flex mt-5">
      <button @click="askGpt">Chat</button>
      <input type="text" class="bg-red-500 w-full" @input="handleChange" :value="input" />
    </div>
  </div>
</template>

关键优化点 #

• 将输入框的@change替换为@input，实现内容实时更新，提升交互体验。
• 若需防范XSS风险（比如内容包含不可信来源的输入），可搭配dompurify做内容净化：
  安装依赖：

  npm install dompurify @types/dompurify --save
  

  修改渲染方法：

  import DOMPurify from 'dompurify';
  
  renderMarkdown(content: string): string {
    return DOMPurify.sanitize(marked.parse(content))
  }
  

原组件失效原因 #

vue-markdown-render属于轻量封装组件，对代码块、嵌套列表等复杂Markdown语法的兼容性不足，而marked这类专业解析器对标准Markdown语法支持更完善。

内容的提问来源于stack exchange，提问作者shan