feat: 添加 Markdown 渲染组件,支持代码高亮和格式化

This commit is contained in:
2025-03-21 18:23:35 +08:00
parent e876a4d88b
commit 8b87de67c1
5 changed files with 122 additions and 3 deletions

View File

@ -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>

View File

@ -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
View 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', '&nbsp;&nbsp;&nbsp;&nbsp;'))
"
></article>
</template>
<style scoped></style>