74 lines
1.4 KiB
Markdown
74 lines
1.4 KiB
Markdown
|
# Markdown 渲染功能依赖安装
|
||
|
|
|
||
|
|
## 需要安装的依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install marked highlight.js --save
|
||
|
|
```
|
||
|
|
|
||
|
|
或者使用 yarn:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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 回复
|
||
|
|
- 平滑的打字机效果
|
||
|
|
- 优化的性能
|
||
|
|
|
||
|
|
✅ **用户体验**
|
||
|
|
- 响应式设计
|
||
|
|
- 暗色/亮色主题适配
|
||
|
|
- 移动端优化
|
||
|
|
- 可访问性支持
|
||
|
|
|
||
|
|
## 使用示例
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<MarkdownRenderer
|
||
|
|
:content="message.content"
|
||
|
|
:isUser="message.role === 'user'"
|
||
|
|
:isStreaming="message.isLoading"
|
||
|
|
:previousContentLength="message.previousLength || 0"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 自定义配置
|
||
|
|
|
||
|
|
如果需要自定义渲染行为,可以修改 `MarkdownRenderer.vue` 中的 `marked` 配置和自定义渲染器。
|