当前位置：首页 > news >正文

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

news 来源：原创 2025/5/15 6:25:47

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+redishttps://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+vuehttps://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';

建议无特殊语言需求的只需要引入常用的包。常用的语言有：https://github.com/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 });
};

流程图显示：