feat: Enhance Markdown rendering in chat component

- Enabled single line break support in Markdown rendering by setting breaks option to true.
- Refactored image rendering logic to use a custom renderer, improving image URL validation and safety.
- Updated Markdown processing to utilize the new renderer and options for better content display.
- Ensured proper handling of line breaks in the rendered output for improved readability.
This commit is contained in:
wizardchen
2025-11-11 02:52:30 +08:00
parent 2d9d930824
commit 5e0651c26f
+20 -12
View File
@@ -31,6 +31,7 @@ import { sanitizeHTML, safeMarkdownToHTML, createSafeImage, isValidImageURL } fr
marked.use({
mangle: false,
headerIds: false,
breaks: true, // 全局启用单个换行支持
});
const emit = defineEmits(['scroll-bottom'])
const renderer = new marked.Renderer();
@@ -104,22 +105,27 @@ const processMarkdown = (markdownText) => {
// 首先对 Markdown 内容进行安全处理
const safeMarkdown = safeMarkdownToHTML(markdownText);
// 自定义安全的渲染器处理图片
const renderer = {
image(href, title, text) {
// 验证图片 URL 是否安全
if (!isValidImageURL(href)) {
return `<p>无效的图片链接</p>`;
}
// 使用安全的图片创建函数
return createSafeImage(href, text || '', title || '');
// 创建自定义渲染器实例,继承默认渲染器
const customRenderer = new marked.Renderer();
// 覆盖图片渲染方法
customRenderer.image = function(href, title, text) {
// 验证图片 URL 是否安全
if (!isValidImageURL(href)) {
return `<p>无效的图片链接</p>`;
}
// 使用安全的图片创建函数
return createSafeImage(href, text || '', title || '');
};
marked.use({ renderer });
// 创建临时的 marked 配置,包含 renderer 和 breaks 选项
// breaks: true 会将单个换行渲染为 <br>,而不是忽略
const markedOptions = {
renderer: customRenderer,
breaks: true // 启用单个换行支持
};
// 安全地渲染 Markdown
let html = marked.parse(safeMarkdown);
// 安全地渲染 Markdown,直接传递选项
let html = marked.parse(safeMarkdown, markedOptions);
// 使用 DOMPurify 进行最终的安全清理
const sanitizedHTML = sanitizeHTML(html);
@@ -212,6 +218,8 @@ onMounted(async () => {
font-size: 14px;
color: #333333;
line-height: 1.6;
/* 确保换行符正确显示 */
white-space: pre-line; /* 保留换行符,但合并多个空格 */
}
.markdown-content {