LaiTool_PRO/MARKDOWN_SETUP.md

Markdown 渲染功能依赖安装

需要安装的依赖

npm install marked highlight.js --save

或者使用 yarn:

yarn add marked highlight.js

依赖说明

• marked (v11.x): 轻量级 Markdown 解析和渲染库
• highlight.js (v11.x): 代码语法高亮库

安装后需要做的

1. 运行安装命令
2. 重启开发服务器
3. Markdown 渲染功能即可使用

功能特性

✅ 完整的 Markdown 支持

• 标题 (H1-H6)
• 粗体、斜体、删除线
• 代码块和行内代码
• 引用块
• 有序列表和无序列表
• 表格
• 链接
• 图片

✅ 富媒体支持

• 图片显示和点击放大
• 视频播放 (.mp4, .webm, .ogg, .avi, .mov)
• 音频播放 (.mp3, .wav, .ogg, .aac)

✅ 代码高亮

• 支持 180+ 种编程语言
• 自动语言检测
• 代码块复制功能
• GitHub 风格样式

✅ 流式输出

• 实时渲染 AI 回复
• 平滑的打字机效果
• 优化的性能

✅ 用户体验

• 响应式设计
• 暗色/亮色主题适配
• 移动端优化
• 可访问性支持

使用示例

<MarkdownRenderer
  :content="message.content"
  :isUser="message.role === 'user'"
  :isStreaming="message.isLoading"
  :previousContentLength="message.previousLength || 0"
/>

自定义配置

如果需要自定义渲染行为,可以修改 MarkdownRenderer.vue 中的 marked 配置和自定义渲染器。