【marked】使用记录

导读：现在越来越多的项目接入了大模型，增加了AI问答的功能模块，前端需要展示类似于Markdown的格式的数据，Marked这个组件使用非常简单，能够直接将数据渲染到浏览器并且保留格式，还可以实现交互。这里记录一下使用过程。

1、安装npm 包

npm i marked@4.3.0
npm i highlight.js@11.11.1

• 注意这里使用的版本是4.3.0 ，实现点击交互的时候marked最新版写法会有些不一样

2、配置marked

import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

// 配置 marked
const renderer = new marked.Renderer()
const defaultLink = renderer.link.bind(renderer)

marked.setOptions({
renderer,
highlight: function (code, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(code, { language: lang }).value
} catch (__) { }
}
return code
},
breaks: true,
gfm: true
})

3、内容呈现

<template>
<div>
<div v-html="renderedContent(msgContent)">
</div>
</div>
</template>

3.1 这里使用computed计算属性，对数据格式化。

const renderedContent = computed(() => {
return function (txt: string) {
return marked(txt)
}
})

4、点击交互

​ 需求：当出现【执行查询】的时候需要刷新数据，为这个节点增加点击事件onMarkdownClick()

// 示例数据
const msgContent = ref('您好！，请点击[执行查询](action:executeQuery)。\\n如果不正确，需要调整或补充信息，请告诉我。')

renderer.link = function (href, title, text) {
// 约定：写成 [执行查询](action:executeQuery)
if (href === 'action:executeQuery') {
const t = text || '执行查询'
return `<a href="#" data-action="executeQuery">${t}</a>`
}
return defaultLink(href, title, text)
}

const handleClick = () => {
console.log('用户点击了! 下面开始写自己的逻辑~')
}

const onMarkdownClick = (e: any) => {
const link = e.target.closest && e.target.closest('a[data-action]')
if (!link) return
const action = link.getAttribute('data-action')
if (action === 'executeQuery') {
e.preventDefault()
handleClick()
}else{
// …
}
}

5、封装组件

将msgContent作为props传参

defineProps({
msgContent: {
type: String,
default: ''
}
})