如何为markdown表格添加自定义交互

前言

目前各家公司的大模型应用如火如荼,除了大模型算法应答能力外,在前端交互上也有差异化展示。 期望在模型输出markdown文本的表格时,能展示如下的表格样式与交互:

表格样式可以通过css处理,但是表头上面的标题+按钮需要新增dom元素和js操作。

通常情况下,会想到在渲染表格后通过dom接口添加新的dom元素满足交互,稍显复杂,也不利于代码维护。而且模型输出,同一个页面上也可以存在多个表格,如果能抽离成组件使用,每个表格各自维护状态,互不影较好。

提到组件编写,可以采用笔者使用webcomponent编写的自定义表格组件👉my-tableWeb Component用得少?在大模型中寻找使用场景,里面包含了表格样式、交互、以及状态维护。

my-table组件编写完成且已完成注册,接下来就考虑如何与模型输出的markdown表格渲染关联使用。

markdown解析器

采用marked.js解析器:marked.js.org

按照文档将引入项目内,由于我们需要对表格进行扩展,因此是针对表格渲染时处理,return返回的就是对应的表格html。

js 复制代码
marked.use({
    renderer: {
        table(token){
            return '<table>xxx</table>'
        }
    }
})

拓展表格交互

按照my-table表格组件的入参,将marked.js解析生成的表格html放在my-table标签包裹即可。

由于renderer函数是重写的,因此原有生成table的富文本也需要重写,当然不是让人从无到有地重写,这一点可以查阅marked.js源码,复制原有的table renderer富文本格式,再使用my-table标签包裹,一并return返回。

这是marked.js中table renderer的源码(查阅GitHub:marked.js):

把table render的代码复制一份再稍微调整一下语言,最终return时使用自定义组件my-table:

js 复制代码
marked.use({
    renderer: {
        table(token){
            let header = '';

            // header
            let cell = '';
            for (let j = 0; j < token.header.length; j++) {
              cell += this.tablecell(token.header[j]);
            }
            header += this.tablerow({ text: cell });

            let body = '';
            for (let j = 0; j < token.rows.length; j++) {
              const row = token.rows[j];

              cell = '';
              for (let k = 0; k < row.length; k++) {
                cell += this.tablecell(row[k]);
              }

              body += this.tablerow({ text: cell });
            }
            if (body) body = `<tbody>${body}</tbody>`;
            // 这里使用自定义组件my-tabel包裹原来的table文本
            return `
                <my-table>
                    <table>
                        <thead>${header}</thead>
                        ${body}
                    </table>
                </my-table>
            `;
        }
    }
})

经过重写table renderer的处理,解析输出的表格富文本自带了my-table标签,在页面渲染时能直接渲染出对应的样式与交互。

通过webcomponent编写的表格浏览器原生支持,不用考虑前端技术栈。

最后

markdown文本输出的富文本添加自定义的样式与交互是很常见的操作,每个平台的主题风格、产品要求不尽相同。

文中提到的表格交互是比较复杂一点的,抽离成组件维护。一般场景没有这么复杂,没必要抽离组件,就在renderer函数对应标签重新输出,或者为markdown渲染的html提供css文件即可。

相关推荐
Zuckjet_4 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_8638014610 分钟前
探索 12 种 3D 文件格式:综合指南
前端·3d
编程武士40 分钟前
从50ms到30ms:YOLOv10部署中图像预处理的性能优化实践
人工智能·python·yolo·性能优化
max5006001 小时前
基于Meta Llama的二语习得学习者行为预测计算模型
人工智能·算法·机器学习·分类·数据挖掘·llama
珍宝商店2 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy2 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
月疯2 小时前
OPENCV摄像头读取视频
人工智能·opencv·音视频
极客天成ScaleFlash2 小时前
极客天成让统一存储从云原生‘进化’到 AI 原生: 不是版本升级,而是基因重组
人工智能·云原生
王哥儿聊AI2 小时前
Lynx:新一代个性化视频生成模型,单图即可生成视频,重新定义身份一致性与视觉质量
人工智能·算法·安全·机器学习·音视频·软件工程