更新记录

1.0.0(2024-08-06) 下载此版本

初版


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.8 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

markdown-render

简介

markdown文档解析,提供流式输出效果的简单案例

使用方法

符合easycom组件模式,导入 uni_modules 后直接使用即可

template中使用代码块即可:<markdown-render :sourceMdContent="sourceMdContent" :showCursor="false"></markdown-render>

也可以导入示例项目体验

参数

参数 类型 默认值 描述
sourceMdContent String markdown文本
showCursor Boolean false 流式输出的时候结尾是否显示闪烁效果

Tips

markdown渲染emoji字符串

使用了markdown-it-emoji,它是markdown-it的一个插件,需要搭配使用

具体使用方法:https://github.com/markdown-it

general-parse.vue文件切换下面的引用,可以查看markdown-it-emoji的所有表情

import emojies_defs from '@/uni_modules/markdown-render/static/full-light.json';
// import emojies_defs from '@/uni_modules/markdown-render/static/full.mjs';

怎么预览流式输出效果

示例项目的stream-parse.vue文件提供了一个调用AI助手接口的简单示例,由于uni.request()只在微信小程序上支持流式响应,所以在APP端(H5)使用了renderjs,如下:

<script module="streamMd" lang="renderjs">
 // 省略...
fetch(config.baseUrl, {
    method: 'POST',
    headers: {
        Authorization: 'Bearer '+ config.key,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model: 'moonshot-v1-8k',
        messages: this.historyMsgList,
        temperature: 0.3,
        stream: true
    })
}).then(async res => {
  // 省略...
}).catch(err => {
    console.log('error:', err);
})
 // 省略...
</script>

我这里使用了Kimi助手的API(不是广告🙉🙉🙉!),目前我的key还有一些余额,可以供大家预览看效果,也可以直接替换成你自己的key,如果是其它平台的账号,比如gpt,请自行替换根目录下config.js文件参数配置,根据各平台接口返回的stream流进行解析即可

 {
    "id": "chatcmpl-e979406c090d4c3bbbfea0ef39c01cd4",
    "object": "chat.completion.chunk",
    "created": 88888,
    "model": "moonshot-v1-8k",
    "choices": [{
        "index": 0,
        "delta": {
            "content": " sorted"
        },
        "finish_reason": null
    }]
}

其中content字段就是需要渲染的markdown文档字符串,可能有些平台它的返回结果字段不一致,需要自己修改一下stream-parse.vue里面resviceMsg方法拼接字符串的逻辑

关于markdown某些样式在小程序不生效问题

比如我自定义了a链接的颜色,我在css中这样定义,在APP、H5是正常改变了颜色,但是在小程序中预览没有效果

.rich-content ::v-deep a {
    color: #1890ff;
}

解决方法,添加类名,再单独写样式,如下:

// 微信小程序里面代码块需要自定义类名才可以更改样式
// #ifdef MP-WEIXIN
htmlString = htmlString.replace(/\<img/gi, '<img class="my-custom-img"');
htmlString = htmlString.replace(/\<a/gi, '<a class="my-custom-a"');
htmlString = htmlString.replace(/\<blockquote/gi, '<blockquote class="my-custom-blockquote"');
htmlString = htmlString.replace(/\<table/gi, '<table  class="my-custom-table"');
htmlString = htmlString.replace(/\<td/gi, '<td class="my-custom-table-td"');
// 只替换<th标签,不替换 thead
htmlString = htmlString.replace(/(?!.*<thead>)(.*?)<th/g, (match) => match.replace('<th', '<th class="my-custom-table-th"'));
// #endif
.rich-content ::v-deep a,
.my-custom-a {
    color: #1890ff;
}

完结撒花 ✿✿ヽ(°▽°)ノ✿

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问