audrius/chatgpt-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Using markdown-it instead of marked as the markdown parser significantly improves the flickering issue during message rendering.

Browse Source
This commit is contained in:
Rafi
2023-03-09 23:35:56 +08:00
parent 4cfc9f4aea
commit bb17cdd123
3 changed files with 44 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/MsgContent.vue
View File

@@ -1,14 +1,15 @@
<script setup>
import { marked } from "marked"
import hljs from "highlight.js"
import MarkdownIt from 'markdown-it'
import copy from 'copy-to-clipboard'
marked.setOptions({
highlight: function (code, lang) {
const md = new MarkdownIt({
linkify: true,
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
return `<div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><div class="hljs-code-body">${hljs.highlight(code, { language }).value}</div>`
return `<pre class="hljs-code-container my-3"><div class="hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1"><span class="pl-2 text-caption">${language}</span><button class="hljs-copy-button" data-copied="false">Copy</button></div><code class="hljs language-${language}">${hljs.highlight(code, { language: language, ignoreIllegals: true }).value}</code></pre>`
},
langPrefix: 'hljs-code-container my-3 hljs language-', // highlight.js css class prefix
})
const props = defineProps(['content'])
@@ -18,7 +19,7 @@ const contentHtml = ref('')
const contentElm = ref(null)
watchEffect(() => {
contentHtml.value = props.content ? marked(props.content) : ''
contentHtml.value = props.content ? md.render(props.content) : ''
})
const bindCopyCodeToButtons = () => {
@@ -27,7 +28,7 @@ const bindCopyCodeToButtons = () => {
}
contentElm.value.querySelectorAll('.hljs-code-container').forEach((codeContainer) => {
const copyButton = codeContainer.querySelector('.hljs-copy-button');
const codeBody = codeContainer.querySelector('.hljs-code-body');
const codeBody = codeContainer.querySelector('code');
copyButton.onclick = function () {
copy(codeBody.textContent ?? '');
@@ -56,7 +57,7 @@ onUpdated(() => {
<div
ref="contentElm"
v-html="contentHtml"
class="chat-msg-content text-justify"
class="chat-msg-content"
></div>
</template>
@@ -66,9 +67,7 @@ onUpdated(() => {
}
.hljs-code-container {
border-radius: 3px;
}
.hljs-code-header {
margin: -1em -1em 10px -1em;
overflow: hidden;
}
.hljs-copy-button{
width:2rem;height:2rem;text-indent:-9999px;color:#fff;