【Vue3】实现一个高可用的markdown显示组件

1. 前言

这篇文章是 Q&A 系统实现续篇。如果你看过之前的文章，并且也跟着提供的代码尝试了，你应该会觉得里面的 Markdown 组件对代码、表格、流程图、时序图等等的显示效果不尽人意，那么如何实现像 DeepSeek 、Kimi 等官网实现的效果呢，这篇文章将带你实现。

2. 效果展示

首先我们先看一下效果：

正常文本显示：

代码显示，自动识别代码的语言并高亮显示：

表格显示：

3. 前提条件

以下并非必要条件，如果你有自己搭建一个本地知识库或者Q&A系统的需求可以参考。

【Spring AI】基于SpringAI+Vue3+ElementPlus的Q&A系统实现(后端)_springai+redis-CSDN博客文章浏览阅读957次，点赞31次，收藏27次。这篇文章将介绍如何基于 RAG 技术，使用 SpringAI + Vue3 + ElementPlus 实现一个 Q&A 系统。本文使用 deepseek 的 DeepSeek-V3 作为聊天模型，使用阿里百炼的 text-embedding-v3 作为向量模型，使用 redis 作为向量库。（PS：近期阿里百炼也上架了 DeepSeek-V3 和 DeepSeek-R1 模型供开发者调用，如果觉得 DeepSeek 官方 AP I比较慢的话，可以去试试）。_springai+redis blog.csdn.net/u013176571/article/details/145368559

【Spring AI】基于SpringAI+Vue3+ElementPlus的Q&A系统实现(前端)_spring ai+vue-CSDN博客文章浏览阅读908次，点赞17次，收藏30次。这篇文章是 Spring AI Q&A 系统的前端实现。这篇文章将介绍如何快速搭建一个基于 vue3 + ElementPlus 的前端项目，vue3 项目的目录结构介绍，如何在前端实现流式响应，如何高亮显示代码等。_spring ai+vue blog.csdn.net/u013176571/article/details/145622956

4. 代码实现

我之前文章使用 markdown 显示插件是 markdown-it，虽然它的插件比较丰富，但中文文档较少，于是我之后又对比的其它插件如md-editor-v3、Vditor，之后发现了一个轻量化，性能更好并且中文文档也多、拓展性也能支持我目前需求的插件 marked 。

4.1 marked 4.1.1 安装 npm install marked 4.1.2 vue3 中使用 <template> <div class="markdown-body" v-html="renderedMarkdown"></div> </template> <script lang="ts" setup> import { onMounted, reactive, toRefs } from 'vue'; import { marked } from 'marked'; const state = reactive({ renderedMarkdown: '' }); const { renderedMarkdown } = toRefs(state); /** * 使用 marked 解析 Markdown * @param markdown 解析的文本 */ const renderMarkdown = (markdown: string): string => { const renderer = new marked.Renderer(); return marked(markdown, { renderer }); }; onMounted(async () => { const text = '```javascript \n const foo = () => { console.log("Hello, world!"); }'; renderedMarkdown.value = renderMarkdown(text); }); </script> 4.2 代码亮显示 4.2.1 安装 highlight.js

代码的高亮显示需要结合 highlight.js。

# 引入 highlight.js npm install highlight.js 4.2.2 vue3 中使用

引入 highlight.js 有两种方式：

加载全部 import hljs from 'highlight.js';

加载常用的 import hljs from 'highlight.js/lib/common';

建议无特殊语言需求的只需要引入常用的包。常用的语言有： github /highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

import hljs from 'highlight.js/lib/common'; // 引入 github 代码主题 import 'highlight.js/styles/github.css'; onMounted(async () => { // 用例 const text = '```javascript \n const foo = () => { console.log("Hello, world!"); }'; // 解析markdown文本 renderedMarkdown.value = renderMarkdown(text); // 代码高亮显示 hljs.highlightAll() }); /** * 使用 marked 解析 Markdown，并结合 highlight.js 实现代码高亮 * @param markdown */ const renderMarkdown = (markdown: string): string => { const renderer = new marked.Renderer(); renderer.code = ({ text, lang, escaped }: Tokens.Code): string => { const language = hljs.getLanguage(lang) ? lang : 'plaintext'; const highlighted = hljs.highlight(text, { language }).value; return `<pre><code class="hljs language-${language}">${highlighted}</code></pre>`; }; return marked(markdown, { renderer }); };

你可以实现这种效果：

4.2.3 显示自己心仪的代码主题

highlightjs 官网 提供了多种代码主题供选择。

引入自己心仪的主题样式:

# 我这里选择 agate，使用其它主题需将 agate 替换成选择的主题名。 import 'highlight.js/styles/agate.css';

修改后效果：

4.3 实现表格显示 4.3.1 代码实现

其实 marked 本身已经支持简单的表格渲染，但是其展示的样式简单，默认样式如下：

我们只需要修改其样式即可：

.markdown-body table { width: 100%; border-collapse: collapse; /* 让表格边框合并 */ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 添加表格阴影 */ margin: 10px 0; } .markdown-body th, .markdown-body td { border: 1px solid #ddd; /* 添加边框 */ padding: 8px; text-align: left; } .markdown-body th { background-color: #f4f4f4; /* 表头背景色 */ font-weight: bold; }

修改后效果：

如果想支持如：列跨度、行跨度、多行标题、合并单元格显示等，可引入扩展插件 marked-extended-tables 。

4.4 流程图、时序图显示

没有改造之前，流程图和时序图是这样显示：

4.3.1 安装 mermaid

想要支持流程图、时序图，需要引入 mermaid 。

# 安装mermaid npm install mermaid 4.3.2 代码改造

改造 onMounted 方法：

import mermaid from "mermaid"; onMounted(async () => { // 处理华 mermaid mermaid.initialize({ startOnLoad: false }); // 用例 const text = `\`\`\`mermaid sequenceDiagram participant 用户 as User participant 登录界面 as LoginUI participant 认证服务 as AuthService participant 数据库 as Database 用户 ->> 登录界面: 输入用户名和密码 登录界面 ->> 认证服务: 发送用户名和密码 认证服务 ->> 数据库: 查询用户信息 数据库 -->> 认证服务: 返回用户信息 认证服务 ->> 认证服务: 验证用户名和密码 认证服务 -->> 登录界面: 返回验证结果 登录界面 -->> 用户: 显示登录结果 \`\`\``; // 解析markdown文本 renderedMarkdown.value = renderMarkdown(text); // 代码高亮 hljs.highlightAll(); nextTick(() => { // 渲染Mermaid图 mermaid.run(); }); });

改造 renderMarkdown 方法：

/** * 使用 marked 解析 Markdown，并结合 highlight.js 实现代码高亮 * @param markdown */ const renderMarkdown = (markdown: string): string => { const renderer = new marked.Renderer(); renderer.code = ({ text, lang }: { text: string; lang: string }) => { if (lang === "mermaid") { // Mermaid 直接渲染 return `<div class="mermaid">${text}</div>`; } const language = hljs.getLanguage(lang) ? lang : 'plaintext'; const highlighted = hljs.highlight(text, { language }).value; return `<pre><code class="hljs language-${language}">${highlighted}</code></pre>`; }; return marked(markdown, { renderer }); };

流程图显示：

时序图显示：

5. 参考文档 Marked 中文网Markdown 教程highlightjs 官网