vue3 在渲染md中的数学公式

常规的md转数学公式插件无法解决此问题

问题: 在渲染过程中 \t 被转义 导致渲染出错

**方案为：将\t 转义为\t **

依赖的插件及版本

    "katex": "^0.16.15",
    "markdown-it": "^14.1.0",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-latex": "^0.2.0",
    "markdown-it-mathjax": "^2.0.0",
    "markdown-it-multimd-table": "^4.2.3",
    "markdown-it-texmath": "^1.0.0",
    "mathjax": "^3.2.2",
    "vue-markdown": "^2.2.4",

utils 文件

mathjax.js

window.MathJax = {
    tex: {
        inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
            ["\(", "\)"],
            ["\\[", "\\]"],
        ], // 行内公式选择符
        displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
            ['?', '?'],
        ], // 段内公式选择符
    },
    startup: {
        ready() {
            MathJax.startup.defaultReady();
        },
    },
};

引入代码

mian.ts中

import "/@/utils/mathjax";
import "mathjax/es5/tex-svg"; 

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';

方法调用

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) => {
	window.MathJax.startup.defaultReady();
	text = preprocessLaTeX(text);
	return md.render(text);
};

renderMd中传入的是需要 渲染到md中的文本