vue解析markdown格式为html结构

一、问题引入

AI智能问答对接模型返回的结果大部分都是markdown格式，前端界面展示需兼容

二、marked插件

1.插件安装

yarn add marked

2.插件注册

main.js全局注册：

import marked from 'marked'; 
Object.defineProperty(Vue.prototype, `$marked`, {
  value: marked,
  writable: false
})

3.使用方法

document.getElementById('content').innerHTML =
      marked.parse('# Marked in the browser\n\nRendered by **marked**.');

可直接结合使用用v-html

<div v-html="$marked.parse(v.answer)"></div>

说明，可以结合本博客其他文章实现打字机效果：

<VueTypewriter ref="typewriter" :interval="50" cursorStr="" @writeEnd="writeEnd(i)"
　　@writeTyping="writeTyping">
　　<div v-html="$marked.parse(v.answer)"></div>
</VueTypewriter>

打字机效果：vue打字机效果 - 盼星星盼太阳 - 博客园   https://www.cnblogs.com/younghxp/p/18767431

marked插件文档：https://github.com/markedjs/marked/tree/v15.0.7?tab=readme-ov-file

markdown格式文档说明：https://blog.csdn.net/qq_41918107/article/details/135462029

三、markedown样式问题

1.github-markdown-css插件安装

yarn add github-markdown-css

2.全局引入

import "github-markdown-css"

3.页面定义class即可

<div class="markdown-body markdown_custom" v-html="$marked.parse(v.answer)"></div>

说明：可自定义部分样式，同理加上对应class   markdown_custom，全局定义样式文件即可

/*
 * @Description: Markdown CSS 自定义
 * @Author: 
 * @version: 1.0
 * @Date: 
 * @LastEditors: 
 * @LastEditTime:
 */

.markdown_custom strong::before {
  content: "「";
}

.markdown_custom strong::after {
  content: "」";
}

.markdown_custom em::before {
  content: "『";
}

.markdown_custom em::after {
  content: "』";
}

.markdown_custom strong em::before,
.markdown_custom em strong::before {
  content: none;
}

.markdown_custom strong em::after,
.markdown_custom em strong::after {
  content: none;
}

.markdown_custom ul {
  list-style-type: disc;
}

github-markdown-css插件文档：https://github.com/sindresorhus/github-markdown-css?tab=readme-ov-file