Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

动态拼接markdown字符串会造成闪动 #517

Closed
mmdlsu opened this issue May 15, 2023 · 26 comments
Closed

动态拼接markdown字符串会造成闪动 #517

mmdlsu opened this issue May 15, 2023 · 26 comments
Labels
question Further information is requested

Comments

@mmdlsu
Copy link

mmdlsu commented May 15, 2023

问题描述

uniapp中用作ChatGPT内容渲染时,流式输出时,拼接markdown字符串会造成闪动,请问有什么解决办法?
screenshots

@mmdlsu
Copy link
Author

mmdlsu commented May 15, 2023

找到解决办法了更新到marked v5.0.2已经修复闪烁的问题

@lidingbang
Copy link

所以应该怎么修复,我也遇到了。求指教

@mmdlsu
Copy link
Author

mmdlsu commented Jul 13, 2023

所以应该怎么修复,我也遇到了。 求指教

升级marked.min.js 到 v5.0.2

@mmdlsu
Copy link
Author

mmdlsu commented Jul 13, 2023

请问如何升级。 我复制最新的代码上去报错 “默认”不是由“../../../../program/yi-li-si/dist/uni-app/components/mp-html/markdown/marked.min.js“,由”../../../../program/yi-li-si/dist/uni-app/components/mp-html/markdown/index.js“. 15:16:33.512 at dist/uni-app/components/mp-html/markdown/index.js:6:7 15:16:33.517 4: * 包括 github-markdown-css ( https://github.com/sindresorhus/github-markdown-css ) 15:16:33.517 5: */ 15:16:33.521 6:导入标记自“./marked.min” 15:16:33.521 ^ 15:16:33.524 7:let index = 0

image

@lidingbang
Copy link

再次打扰了。我是先npm包下来,然后找到marked.min.js的代码复制下来,最后粘贴在mp-html的marked.min.js。请问升级方法是这样吗

@mmdlsu
Copy link
Author

mmdlsu commented Jul 13, 2023

再次打扰了。我是先npm包下来,然后找到marked.min.js的代码复制下来,最后粘贴在mp-html的marked.min.js。请问升级方法是这样吗

小程序里面打包,把旧的marked.min.js替换为最新的

@mmdlsu
Copy link
Author

mmdlsu commented Jul 13, 2023

再次打扰了。我是先npm包下来,然后找到marked.min.js的代码复制下来,最后粘贴在mp-html的marked.min.js。请问升级方法是这样吗

image

@mmdlsu
Copy link
Author

mmdlsu commented Jul 13, 2023

实在不好意思,打扰了。我复制的文件还是不行,是因为marked没有导出方法,而mp-html有,我自己加导出会有问题。所以可以让我复制大佬的marked.min.js代码吗

用uni_modules的形式,不要用npm,不好修改

@zyMacro
Copy link

zyMacro commented Aug 10, 2023

再次打扰了。我是先npm包下来,然后找到marked.min.js的代码复制下来,最后粘贴在mp-html的marked.min.js。请问升级方法是这样吗

请问你解决这个问题了吗

@zyMacro
Copy link

zyMacro commented Aug 10, 2023

实在不好意思,打扰了。我复制的文件还是不行,是因为marked没有导出方法,而mp-html有,我自己加导出会有问题。所以可以让我复制大佬的marked.min.js代码吗

用uni_modules的形式,不要用npm,不好修改

大佬,我直接把marked.min.js文件替换成https://github.com/markedjs/marked/commits/master/marked.min.js项目的文件,但没有work报错了,需要做些其他的处理吗,比如index.js需要改动吗
image

@mmdlsu
Copy link
Author

mmdlsu commented Aug 11, 2023

image

@zyMacro
Copy link

zyMacro commented Aug 11, 2023

image

大佬的意思是在index.js中加入marked.use吗,我试了一下好像还是不行。
image
image
image

@mmdlsu
Copy link
Author

mmdlsu commented Aug 11, 2023

用marked v5.0.2

@zyMacro
Copy link

zyMacro commented Aug 11, 2023

用marked v5.0.2

image v5.0.2试过了也不行,应该是直接替换了就可以了对吧,这也不存在编译啥的?

@mmdlsu
Copy link
Author

mmdlsu commented Aug 11, 2023

我直接打包一份把你试试mp-html.zip

@zyMacro
Copy link

zyMacro commented Aug 11, 2023

我直接打包一份把你试试mp-html.zip
感谢大佬,确实work了,我比较了一下,不知道是不是下面这行代码的原因?

image 另外,还想问下,我有个eventstream的接口返回的字符串(类似下图,每次新加一个字符这样),我先是直接把内容传给content,这样由于相当于每次都是重新渲染,导致经常闪烁,我试过改成setcontent传入新增的字符,但是每次追加的字符会直接换行展示。想问下大佬,有什么建议吗。 image

@mmdlsu
Copy link
Author

mmdlsu commented Aug 11, 2023

我是这样直接拼接的list[i].content +=content

@zyMacro
Copy link

zyMacro commented Aug 11, 2023

我是这样直接拼接的list[i].content +=content

大佬,还想问个问题。为什么用了您打的包以后,代码高亮失效了,我看你这也引入了highlight啊,另外可以大致告诉我你打的包work的原因吗,跟markdown文件夹以外的内容有关系吗,因为我直接把我的包里面markdown替换掉也还是不行

@zyMacro
Copy link

zyMacro commented Aug 15, 2023

我直接打包一份把你试试mp-html.zip

大佬,还是想打扰下,为什么你这个包的代码高亮失效了呀

@mmdlsu
Copy link
Author

mmdlsu commented Aug 15, 2023

截图看看
<mp-html :content="" markdown selectable/>

@zyMacro
Copy link

zyMacro commented Aug 15, 2023

截图看看 <mp-html :content="" markdown selectable/>

image

我是直接用大佬打的包,然后看着文档改了这个地方,看着只有js支持的好一些。
image

image 然后查了下文档,https://marked.js.org/using_advanced#highlight 高亮相关的配置都在5.0版本废弃了,换用marked-highlight image 但我不知道我们这种用法,index.js里应该怎样引入marked-highlight包 https://www.npmjs.com/package/marked-highlight

@mmdlsu
Copy link
Author

mmdlsu commented Aug 15, 2023

没问题哦,我这里测试js、java、php都有高亮
image

@zyMacro
Copy link

zyMacro commented Aug 15, 2023

没问题哦,我这里测试js、java、php都有高亮 image

我理解的代码高亮是关键字,变量等都是各用一种颜色?我看您这图里面好像颜色也比较单一。
比如下面这样?
image

@mmdlsu
Copy link
Author

mmdlsu commented Aug 15, 2023

没问题哦,我这里测试js、java、php都有高亮 image

我理解的代码高亮是关键字,变量等都是各用一种颜色?我看您这图里面好像颜色也比较单一。 比如下面这样? image

我可能理解错了,有时间再看看

@mmdlsu
Copy link
Author

mmdlsu commented Aug 15, 2023

没问题哦,我这里测试js、java、php都有高亮 image

我理解的代码高亮是关键字,变量等都是各用一种颜色?我看您这图里面好像颜色也比较单一。 比如下面这样? image

mp-html用的是prism.min.js,目前把 langPrefix: ''删掉对js有效果,去prism官网有语言选择不知道是不是没加上语言
image

@zyMacro
Copy link

zyMacro commented Aug 15, 2023

没问题哦,我这里测试js、java、php都有高亮 image

我理解的代码高亮是关键字,变量等都是各用一种颜色?我看您这图里面好像颜色也比较单一。 比如下面这样? image

mp-html用的是prism.min.js,目前把 langPrefix: ''删掉对js有效果,去prism官网有语言选择不知道是不是没加上语言 image

感谢大佬,确实是这个问题,默认语言只有js等几种,手动加上其他的以后就work了

@jin-yufeng jin-yufeng added the question Further information is requested label Jan 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

4 participants