使用markdown展示流式输出的内容

安装markdown要用到的插件

pnpm add markdown-it markmap-common markmap-lib md-editor-v3  markmap-view highlight.js

写一个markdown.js文件。

import Markdown from "markdown-it";
import highlight from "highlight.js";
import 'highlight.js/styles/github.css';
const mdOptions = (Markdown.Options = {
  html:true,        // 在源码中启用 HTML 标签
  linkify: true,// 将类似 URL 的文本自动转换为链接。
  typographer: true,// 双 + 单引号替换对，当 typographer 启用时。
  breaks: true, // 转换段落里的 '\n' 到 <br>。
  langPrefix: "language-",
  // 代码高亮
  highlight(str, lang) {
    if (lang && highlight.getLanguage(lang)) {
      try {
        return (
          '<pre class="code"><code>' +
          highlight.highlight(lang, str, true).value +
          "</code></pre>"
        );
      } catch (__) {}
    }
    return "";
  },
});

export const md = new Markdown(mdOptions);

在template中使用

  <div :class="item.role === 'assistant' ? 'assistants' : 'content'" v-html="md.render(item.content)" v-if="!(item.img && fileName) && item.content"></div>

在script中引入markdown.js文件

import { md } from '@/utils/markdown'