【CSS】react-markdown组件,大模型输出Markdown格式内容增加光标效果

项目场景:

大模型输出时,偶尔会有输出卡顿的情况,需要做一个光标效果告诉客户正在生成而不是已经完成了。
由于Markdown格式会有行内元素和块级元素(主要是有序列表和无序列表ul,ol,li标签),所以需要单独做处理。
markdown组件使用的react-markdown@8.0.7版本


解决方案:

使用CSS需要考虑兼容性,如果想要兼容低版本浏览器,需要使用JS来辅助,找到最后一个元素的最后一个子元素来增加类名

在大模型输出的时候给markdown添加class=“markdown-container”,生成结束去掉这个class。

浏览器兼容性
Safari 15.4+需启用 :has()
Chrome 105+原生支持
Firefox 121+开启实验性功能 使用 JS 动态标记
Edge 120+原生支持
// 适用于markdown中常见的正文
.markdown-container > :not(ol):not(ul):not(pre):last-child:after, 
.markdown-container > pre:last-child code:after,
// 针对markdown中的ul,ol
.markdown-container > :is(ul,ol):last-child > li:last-child p:last-child:after, 
.markdown-container > :is(ul,ol):last-child > li:last-child:not(:has(>p)):not(:has(*>li)):after, 
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child:not(:has(>p)):not(:has(*>li)):after, 
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child>:is(ul,ol):last-child > li:last-child:not(:has(>p)):after {
    display: inline-block;
    content: "";
    margin: 0 .2em;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background-color: black;
    vertical-align: text-bottom;
    transform: translate3d(0, -2px, 0);
    animation: blink .7s infinite;
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值