兼容渲染markdown格式的内容

This commit is contained in:
aixianling
2024-08-19 15:23:45 +08:00
parent f7c2d03428
commit 5ee3bfbc41
5 changed files with 815 additions and 1 deletions

View File

@@ -3,7 +3,7 @@
<div class="chat-wrapper" v-for="item in list" :key="item.id">
<div class="chat-text" :class="{right:item.userType == '0',system:item.userType == '2'}">
<img v-if="item.userType!=2" class="avatar" :src="avatar(item)" alt=""/>
<div class="content" v-text="item.content"/>
<div class="content" v-html="markdown(item.content)"/>
</div>
</div>
</el-scrollbar>
@@ -19,6 +19,11 @@ export default {
props: {
list: {default: () => []}
},
data() {
return {
md: null
}
},
computed: {
lastMessage: v => v.list.at(-1)?.content
},
@@ -37,9 +42,24 @@ export default {
avatar(item) {
return item.avatar || (item.userType == '0' ? 'https://cdn.sinoecare.com/i/2024/06/17/666fdb275be82.png' :
'https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png')
},
markdown(v) {
return this.md?.render(v) || v
}
},
mounted() {
const {hljs, markdownit} = window
this.md = markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, {language: lang}).value;
} catch (__) {
}
}
return ''; // use external default escaping
}
})
this.scrollBottom()
}
}
@@ -49,6 +69,21 @@ export default {
.chatContent {
:deep(.el-scrollbar__wrap) {
overflow-x: hidden;
.content {
pre {
background-color: #282c34;
color: #abb2bf;
font-size: 12px;
padding: 4px;
line-height: 16px;
}
code {
white-space: pre-wrap;
width: 100%;
}
}
}
.chat-text {