处理DeepSeek返回的markdown文本

处理DeepSeek返回的markdown文本

markdown预览组件，支持公式显示，支持uniapp。

相关依赖

• markdown-it
• markdown-it-mathjax
• markdown-it-katex
• markdown-it-latex
• katex
• github-markdown-css

组件源码

<!--
 * @Description: markdown显示组件
 * @Author: wang keju
 * @Email: git config user.email
 * @Date: 2025-02-25 20:42:41
 * @LastEditTime: 2025-02-27 23:28:39
 * @LastEditors: wang keju
-->
<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import MarkdownIt from 'markdown-it';
import markdownItMathjax from 'markdown-it-mathjax';
import mk from 'markdown-it-katex';
import mkl from 'markdown-it-latex';

import 'katex/dist/katex.min.css';
import "github-markdown-css";

type Props = {
    text: string;
}

const props = defineProps<Props>();
const displayText = ref<string>();

const preprocessLaTeX = (content: string) => {
	if (typeof content !== 'string') return content;
	return content
		.replace(/\\\[(.*?)\\\]/gs, (_, equation) => `$$${equation}$$`)
		.replace(/\\\((.*?)\\\)/gs, (_, equation) => `$$${equation}$$`)
		.replace(/(^|[^\\])\$(.+?)\$/gs, (_, prefix, equation) => `${prefix}$${equation}$`)
		.replace(/\t/g, '\\t');
};

const md = new MarkdownIt({
	html: true,
	linkify: true,
	typographer: true,
});
md.use(markdownItMathjax);
md.use(mk, {
	throwOnError: false,
});
md.use(mkl);

const renderMd = (text: string) => {
    text = preprocessLaTeX(text);
    return md.render(text);
};

const updateDisplayText = async () => {
    const info = renderMd(props.text);
    displayText.value = info;
}

watch(props, updateDisplayText);

onMounted(() => {
    updateDisplayText();
});
</script>

<template>
    <view class="markdown-body" data-theme="light" v-html="displayText"></view>
</template>

<style lang="scss" scoped>
.markdown-body {
    box-sizing: border-box;
    padding: 12px;
    min-height: 32px !important;
    ::deep(.katex-display) {
        margin: 12px 0 !important;
    }
}
</style>