102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
<script setup>
|
|
import { marked } from "marked"
|
|
import hljs from "highlight.js"
|
|
import copy from 'copy-to-clipboard'
|
|
|
|
// Part of the code comes from this project https://github.com/arronhunt/highlightjs-copy, thanks to the author's contribution
|
|
|
|
hljs.addPlugin({
|
|
'after:highlightElement': ({ el, result, text }) => {
|
|
let header = el.parentElement.querySelector(".hljs-code-header");
|
|
if (header) {
|
|
header.remove();
|
|
}
|
|
|
|
header = Object.assign(document.createElement("div"), {
|
|
className: "hljs-code-header d-flex align-center justify-space-between bg-grey-darken-3 pa-1",
|
|
innerHTML: `<div class="pl-2 text-caption">${result.language}</div>`
|
|
});
|
|
|
|
let copyButton = Object.assign(document.createElement("button"), {
|
|
innerHTML: "Copy",
|
|
className: "hljs-copy-button",
|
|
});
|
|
copyButton.dataset.copied = false;
|
|
|
|
header.append(copyButton);
|
|
//
|
|
el.parentElement.classList.add("d-flex","flex-column", "my-3");
|
|
el.parentElement.prepend(header);
|
|
copyButton.onclick = function () {
|
|
copy(text);
|
|
|
|
copyButton.innerHTML = "Copied!";
|
|
copyButton.dataset.copied = 'true';
|
|
|
|
setTimeout(() => {
|
|
copyButton.innerHTML = "Copy";
|
|
copyButton.dataset.copied = 'false';
|
|
}, 2000);
|
|
};
|
|
}
|
|
});
|
|
|
|
marked.setOptions({
|
|
// highlight: function (code, lang) {
|
|
// const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
|
// return hljs.highlight(code, { language }).value
|
|
// },
|
|
langPrefix: 'hljs language-', // highlight.js css class prefix
|
|
})
|
|
|
|
const props = defineProps(['content'])
|
|
|
|
const contentHtml = ref('')
|
|
|
|
const contentElm = ref(null)
|
|
|
|
const highlightCode = () => {
|
|
if (!contentElm.value) {
|
|
return
|
|
}
|
|
contentElm.value.querySelectorAll('pre code').forEach((block) => {
|
|
hljs.highlightElement(block)
|
|
})
|
|
}
|
|
|
|
watchEffect(() => {
|
|
console.log('content changed', props.content)
|
|
contentHtml.value = props.content ? marked(props.content) : ''
|
|
if (props.content && props.content.endsWith('```')) {
|
|
nextTick(() => {
|
|
highlightCode()
|
|
})
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="contentElm"
|
|
v-html="contentHtml"
|
|
class="chat-msg-content text-justify"
|
|
></div>
|
|
</template>
|
|
|
|
<style>
|
|
.chat-msg-content ol {
|
|
list-style-position: inside;
|
|
}
|
|
.hljs-copy-button{
|
|
width:2rem;height:2rem;text-indent:-9999px;color:#fff;
|
|
border-radius:.25rem;border:1px solid #ffffff22;
|
|
background-image:url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
|
|
background-repeat:no-repeat;background-position:center;
|
|
transition:background-color 200ms ease,transform 200ms ease-out
|
|
}
|
|
.hljs-copy-button:hover{border-color:#ffffff44}
|
|
.hljs-copy-button:active{border-color:#ffffff66}
|
|
.hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}
|
|
@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}
|
|
</style> |