前言

随着 Deepseek 在国内的爆火，不少企业甚至个人都选择了购入 ds 的 API，并将其接入到自己的 APP 或网站之中。然而，一些用户发现 ds 输出的文本格式会出现奇怪的列表符号（-、*）、代码块显示异常（```）、标点错位、换行混乱等问题，导致内容在页面上显示错乱。本文将分析这一现象的成因，并提供相应的解决方案。

如图，输出内容看起来比较混乱

现象分析

为什么 ds 的输出内容会出现这些格式问题呢？答案很简单，因为 ds 的输出采用 Markdown（下文简称 md） 格式，而不是普通的纯文本或 HTML。

Markdown 是一种轻量级标记语言，具有以下特点：

兼容性更强：Markdown 可用于网页、移动端、桌面端等多个场景，而 HTML 主要用于网页。
可读性更好：Markdown 语法简洁，如 # 一级标题 可以生成大标题，## 二级标题 生成中标题。
安全性更高：HTML 可能会引发 XSS（跨站脚本攻击），而 Markdown 在渲染前不会直接执行代码，能降低安全风险。

实现原理

了解了 Markdown 作为输出格式的优缺点后，我们可以通过格式转换来解决问题。正确的思路是：

1.获取 ds 的输出内容（Markdown 格式）。
2.将 Markdown 转换为 HTML，然后再渲染到页面上，以保证正确的排版显示。
3.采用前端渲染 Markdown，减少服务器计算压力，提高安全性。

具体方法

方法上我们可以在后端进行转换后再传给前端，也可以在前端中再进行转换。但是，在后端转化每次请求都要让服务器解析 Markdown，再返回 HTML，这会明显增加服务器负担，而在前端进行转换则可以减轻后端的计算压力；另一方面，转换后未经审查的html内容在传输给前端时也容易出现上述的安全问题。因此，我们选择在前端再进行内容的转换，转换完毕之后就可以直接渲染了。

不多废话上代码，首先是html的部分

<!-- 引入 Markdown 解析库和代码高亮库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/languages/javascript.min.js"></script>

<!-- 引入自定义的 Markdown 处理 JS 文件 -->
<script src="markdownConverter.js"></script>

<!-- Markdown 输入框 -->
<textarea id="markdownInput" placeholder="在这里输入Markdown内容"></textarea>

<!-- Markdown 渲染的 HTML -->
<div id="htmlOutput"></div>

然后是js的部分：

// 引入 marked.js 和 highlight.js（在 HTML 文件中手动引入库）
if (typeof marked !== "undefined" && typeof hljs !== "undefined") {
    marked.setOptions({
        breaks: true, // 保留换行符
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        },
        sanitize: true // 过滤潜在的 XSS 攻击
    });
}

// Markdown 转 HTML 并渲染
function convertMarkdown() {
    const markdownText = document.getElementById("markdownInput").value;
    const htmlContent = marked.parse(markdownText);
    document.getElementById("htmlOutput").innerHTML = htmlContent;

    // 代码高亮处理
    document.getElementById("htmlOutput").querySelectorAll("pre code").forEach((block) => {
        hljs.highlightElement(block);
    });
}

// 监听输入框的变化，实时转换
document.addEventListener("DOMContentLoaded", function () {
    const markdownInput = document.getElementById("markdownInput");
    if (markdownInput) {
        markdownInput.addEventListener("input", convertMarkdown);
    }
});

然后输出内容就正常啦！！！

总结

为了避免 ds 输出的 Markdown 在页面上显示混乱，我们可以在前端使用 marked.js 或 showdown.js 将 Markdown 转换为 HTML，这样既能保证格式正确，也能提升安全性和性能。