Simon-He95/vue-markdown-renderer

组件渲染数学公式时会有红色闪烁,交互不太友好,用的数学依赖是 "katex": "^0.16.25",

Closed this issue · 12 comments

Describe the bug

Image Image

Reproduction

00

Used Package Manager

npm

Logs

No response

提供一下复现code

提供一下复现code

流式输出,前端调用后台AI流式输出,直接渲染markdown格式的文本 ,30ms定时器流式输出,文本中含有公式,KaTex 转换时 会有红色闪烁背景,影响体验。

Image Image Image 文本传入组件中 Image 渲染模板 Image

package.json

Image

是不是 katex官方的问题,或者需要前端在渲染层面上进行调整

你的组件其它体验都很好

不用贴这个代码,只要数学公式的那一块的code

能粘贴text给我嘛

$$
    \text{CO}_2\text{e} = \sum (\text{AD}_i \times \text{EF}_i)
    $$

我帮忙扣出来了,可以参考下

‘’ $$
\text{CO}_2\text{e} = \sum (\text{AD}_i \times \text{EF}_i)
$$ ‘’

你可以先设置 worker 的方式去优化,直接渲染里面没有处理异常,再下个版本就会修复,但是还是建议直接用 worker

import { setKaTeXWorker } from 'vue-renderer-markdown'
import KatexWorker from 'vue-renderer-markdown/workers/katexRenderer.worker'

setKaTeXWorker(new KatexWorker())

你可以先设置 worker 的方式去优化,直接渲染里面没有处理异常,再下个版本就会修复,但是还是建议直接用 worker

import { setKaTeXWorker } from 'vue-renderer-markdown'
import KatexWorker from 'vue-renderer-markdown/workers/katexRenderer.worker'

setKaTeXWorker(new KatexWorker())

WOW,加了woker效果很好哦,完美解决,这样我就不需要自己去用markdown-it 组件和生态了,希望未来该组件支持 图片渲染,表格渲染,图表渲染,目前还没测这些场景,哈哈。