通过markdown-it做一个类似gpt的聊天对话框

599 阅读1分钟

markdown引入

首先按照markdown-it pnpm i markdown-it

当引入markdown-it-copy的plugin,类似下面去配置option:

const options = {
iconStyle:'font-size: 14px; opacity: 0.4;',	
iconClass:'mdi mdi-content-copy',	
buttonStyle:'background: #fafafa; position: absolute; top: 0px; right: 6px; cursor: pointer; outline: none;border:0px;',	
buttonClass:'copy',
}

你会遇到一个问题,会看不见别人显示出来的copy按钮,是一个圆圈,然后你去谷歌搜,别人给你的答案是接入所谓的mdi的库,其实这个库就是爬坑的开始,这边代码的引入是webfont的引入,

import '@mdi/font/css/materialdesignicons.min.css'

然后你在本地上会显示出来这个copy图片,但是放到正式项目并不会实现,这是我遇到的