以下是逐步替换KaTeX为MathJax的步骤：
1. **移除KaTeX依赖**
```bash
npm uninstall @traptitech/markdown-it-katex
```
2. **安装MathJax插件**
```bash
npm install markdown-it-mathjax3
```
3. **修改Vue组件导入**
```diff
- import mdKatex from '@traptitech/markdown-it-katex'
+ import mdMathJax from 'markdown-it-mathjax3'
```
4. **配置markdown-it实例**
```diff
- mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+ mdi.use(mdMathJax)
```
5. **添加MathJax全局配置**（在项目入口文件main.ts）
```typescript
import { mathjax } from 'mathjax-full/js/mathjax'
import { TeX } from 'mathjax-full/js/input/tex'
import { SVG } from 'mathjax-full/js/output/svg'
import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor'
// 初始化MathJax配置
const adaptor = browserAdaptor();
mathjax.document(window.document, {
InputJax: new TeX({ packages: ['base', 'ams'] }),
OutputJax: new SVG({ fontCache: 'global' })
});
```
6. **修改样式部分**
```diff
/* 原KaTeX样式 */
-.katexmath-block {
+ .MathJax {
padding: 10px;
border-radius: 0.375rem;
}
```
7. **添加渲染后更新逻辑**（在Text.vue的script部分）
```typescript
import { onUpdated } from 'vue'
// 在每次更新后渲染数学公式
onUpdated(() => {
if ((window as any).MathJax) {
(window as any).MathJax.typesetPromise()
}
})
```
8. **在index.html添加MathJax加载脚本**
```html
```
**需要注意的要点：**
1. **公式渲染时机**：
- MathJax需要DOM加载完成后动态渲染
- 使用onUpdated生命周期钩子确保更新后重新渲染
2. **语法差异**：
- 检查原有的公式语法是否与MathJax兼容
- 默认支持$$...$$（块级公式）和$...$（行内公式）
3. **暗黑模式适配**：
```css
/* 添加暗黑模式下的颜色覆盖 */
.dark .MathJax_SVG svg {
fill: #e5e7eb;
}
```
4. **性能优化**：
- 可考虑添加debounce逻辑防止频繁渲染
- 使用自定义加载配置减少体积
5. **错误处理**：
- 移除原有的errorColor配置
- MathJax默认会显示红色错误信息
**完整组件修改示例：**
```typescript
// 修改后的script部分
import mdMathJax from 'markdown-it-mathjax3'
// 移除原有katex配置
mdi.use(mdMathJax)
// 添加更新后渲染逻辑
onUpdated(() => {
if (typeof MathJax !== 'undefined' && MathJax.typeset) {
MathJax.typesetPromise()
}
})
```
完成以上修改后，MathJax会处理所有数学公式的渲染。建议在全局样式中添加以下优化：
```css
.MathJax {
overflow-x: auto;
padding: 1rem 0;
}
@media (max-width: 640px) {
.MathJax {
font-size: 14px;
}
}
```
这些修改将实现从KaTeX到MathJax的平稳过渡，同时保持原有的Markdown渲染功能，并确保数学公式的正确显示。
AI助手
资讯
常用工具
网站模板