feat: 添加 Markdown 渲染组件,支持代码高亮和格式化
This commit is contained in:
@ -26,7 +26,10 @@ const props = defineProps({
|
||||
<span class="text-sm font-medium">{{ name }}</span>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50">
|
||||
<span v-if="message">{{ message }}</span>
|
||||
<span v-if="message">
|
||||
<Markdown :source="message" />
|
||||
<!-- {{ message }} -->
|
||||
</span>
|
||||
<span v-else class="flex items-center gap-1.5">
|
||||
<UIcon name="svg-spinners:3-dots-scale" class="text-lg -mt-0.5" />
|
||||
<p class="text-xs">思考中</p>
|
||||
|
@ -38,7 +38,8 @@ defineProps({
|
||||
class="rounded-lg bg-white/50 p-2 text-sm dark:bg-neutral-800/50 break-all text-justify"
|
||||
>
|
||||
<div v-if="message.message" class="prose prose-sm">
|
||||
{{ message.message }}
|
||||
<!-- {{ message.message }} -->
|
||||
<Markdown :source="message.message" />
|
||||
</div>
|
||||
<span v-else class="flex items-center gap-1.5">
|
||||
<UIcon name="svg-spinners:3-dots-scale" class="text-lg -mt-0.5" />
|
||||
|
43
components/Markdown.vue
Normal file
43
components/Markdown.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import md from "markdown-it";
|
||||
import hljs from "highlight.js";
|
||||
import "highlight.js/styles/github-dark-dimmed.min.css";
|
||||
|
||||
const renderer = md({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
breaks: true,
|
||||
highlight: function (str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return `<pre class="hljs" style="overflow-x: auto"><code>${
|
||||
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
|
||||
}</code></pre>`;
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
return (
|
||||
'<pre class="hljs"><code>' + md().utils.escapeHtml(str) + "</code></pre>"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
|
||||
v-html="
|
||||
renderer.render(source.replaceAll('\t', ' '))
|
||||
"
|
||||
></article>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
Reference in New Issue
Block a user