markdown-it-katex 安装和配置指南

markdown-it-katex 是一个用于 Markdown-it 的插件，旨在通过 KaTeX 库在 Markdown 文档中添加数学公式支持。KaTeX 是一个快速渲染数学公式的库，相比于 MathJax，它在性能上有显著优势。

步骤 1: 安装 Markdown-it
首先，你需要安装 Markdown-it 库。你可以通过以下命令安装：

npm install markdown-it
或者使用 yarn：

yarn add markdown-it
步骤 2: 安装 markdown-it-katex 插件
接下来，安装 markdown-it-katex 插件：

npm install markdown-it-katex
或者使用 yarn：

yarn add markdown-it-katex

mian.js

import katex from "katex";  // Katex核心库

import renderMathInElement from "katex/contrib/auto-render/auto-render.js";  // 自动渲染工具

import "katex/dist/katex.min.css"; // 必须的基础样式

import { md } from '@/utils/markdown'  // 预配置的markdown-it实例
import markdownItKatex from '@iktakahiro/markdown-it-katex';  // Katex插件


// 配置markdown-it-katex插件
md.use(markdownItKatex, {
    output: "mathml", // 输出模式：mathml（原生数学标记）或html（CSS渲染）
    throwOnError: false, // 禁用LaTeX解析错误抛出
    // 可选：添加自定义LaTeX宏定义
    // macros: { "\\RR": "\\mathbb{R}" }
});


功能说明：
 * 1. 将\[...\]转换为$$...$$（块级公式）
 * 2. 将\(...\)转换为$...$（行内公式）
 * 注意：此正则表达式为简化版本，无法处理复杂嵌套情况


const preprocessLaTeX = (content) => {
  if (typeof content !== "string") return content;
    let result = content
    .replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation.trim()}$$`)
    .replace(/\\\((.*?)\\\)/g, (_, equation) => `$${equation.trim()}$`)
  return result
};


const preRender = computed(()=> {
    return preprocessLaTeX(props.content) // 对props.content进行预处理
})

• 当 output: "mathml" 时：

  • 公式应渲染为MathML格式（浏览器原生支持）

  • 需验证开发者工具中是否存在 $$ 标签

• 当 output: "html" 时：

  • 公式应通过Katex CSS渲染

  • 需验证页面显示效果

markdown-it | markdown-it 中文文档

MarkdownIt 插件 | Markdown It 插件

markdown-it-texmath 技术文档-CSDN博客