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

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

news 来源：原创 2025/4/28 6:51:06

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进行预处理
})