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

金融门户网站建设品牌网站升级

wzjs 2025/9/18 23:48:56

金融门户网站建设,品牌网站升级,wordpress导航链接地址都是主页,西安seo关键词排名1. 前言这篇文章是 Q&A 系统实现续篇。如果你看过之前的文章，并且也跟着提供的代码尝试了，你应该会觉得里面的 Markdown 组件对代码、表格、流程图、时序图等等的显示效果不尽人意，那么如何实现像 DeepSeek 、Kimi 等官网实现的效果呢&…

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 () => {// 处理华 mermaidmermaid.initialize({ startOnLoad: false });// 用例const text = `\`\`\`mermaid
sequenceDiagramparticipant 用户 as Userparticipant 登录界面 as LoginUIparticipant 认证服务 as AuthServiceparticipant 数据库 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 });
};

流程图显示：