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

Vue 渲染 LaTeX 公式 Markdown 库

article 2026/3/3 4:18:32

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

Vue 渲染 LaTeX 公式 Markdown 库

- - 1. 使用 `MathJax` 渲染 LaTeX 公式
  - - 安装依赖
    - 配置 MathJax
    - 创建 Vue 组件
    - 使用组件
  - 2. 使用 `KaTeX` 渲染 LaTeX 公式
  - - 安装依赖
    - 创建 KaTeX 组件
    - 使用组件
  - 3. 结合 Markdown 渲染
  - - 安装依赖
    - 创建 Markdown 组件
    - 使用组件
  - 总结

在 Vue 项目中渲染包含 LaTeX 公式的 Markdown 内容，推荐使用 markdown-it 结合 markdown-it-katex。 markdown-it 是一个高性能的 Markdown 解析器，而 markdown-it-katex 是其插件，用于渲染 LaTeX 数学公式。通过这种方式，你可以轻松地在 Vue 中展示复杂的数学公式，同时保持代码的简洁性和可维护性。这种组合不仅支持行内公式（如 $E=mc^2$ ），还支持块级公式（如 $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$），非常适合学术和技术文档的展示。

1. 使用 `MathJax` 渲染 LaTeX 公式

安装依赖

npm install mathjax

配置 MathJax

在 public/index.html 中引入 MathJax 的 CDN 链接并进行配置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue LaTeX Project</title><script>MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']],displayMath: [['$$', '$$'], ['\\[', '\\]']]},svg: { fontCache: 'global' }};</script><script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
</head>
<body><div id="app"></div>
</body>
</html>

创建 Vue 组件

创建一个 MarkdownRenderer.vue 组件，用于渲染 Markdown 内容并支持 LaTeX 公式：

<template><div v-html="renderedContent"></div>
</template><script>
export default {props: {content: String},computed: {renderedContent() {// 使用 MathJax 自动解析 LaTeX 公式return this.content;}},mounted() {// 确保 MathJax 渲染公式MathJax.typesetPromise([this.$el]);},watch: {content() {// 当内容更新时重新渲染公式MathJax.typesetPromise([this.$el]);}}
};
</script>

使用组件

在父组件中使用 MarkdownRenderer 组件：

<template><div><markdown-renderer :content="markdownContent" /></div>
</template><script>
import MarkdownRenderer from './components/MarkdownRenderer.vue';export default {components: {MarkdownRenderer},data() {return {markdownContent: `
# Markdown with LaTeX Formulas$$
\\begin{align*}
e^x & = 1 + x + \\frac{x^2}{2!} + \\frac{x^3}{3!} + \\frac{x^4}{4!} + \\cdots \\\\& = \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}
\\end{align*}
$$\\[ \\text{均值} (\\bar{x}) = \\frac{1}{N}\\sum_{i=1}^{N} x_i \\]`};}
};
</script>

2. 使用 `KaTeX` 渲染 LaTeX 公式

安装依赖

npm install katex

创建 KaTeX 组件

创建一个 KatexRenderer.vue 组件，用于渲染 LaTeX 公式：

<template><div v-html="renderedFormula"></div>
</template><script>
import katex from 'katex';
import 'katex/dist/katex.min.css';export default {props: {formula: String},computed: {renderedFormula() {return katex.renderToString(this.formula, { throwOnError: false });}}
};
</script>

使用组件

在父组件中使用 KatexRenderer 组件：

<template><div><katex-renderer :formula="formula" /></div>
</template><script>
import KatexRenderer from './components/KatexRenderer.vue';export default {components: {KatexRenderer},data() {return {formula: `
\\begin{align*}
e^x & = 1 + x + \\frac{x^2}{2!} + \\frac{x^3}{3!} + \\frac{x^4}{4!} + \\cdots \\\\& = \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}
\\end{align*}
`};}
};
</script>

3. 结合 Markdown 渲染

如果你需要结合 Markdown 渲染并支持 LaTeX 公式，可以使用 markdown-it 和 markdown-it-katex。

安装依赖

npm install markdown-it markdown-it-katex

创建 Markdown 组件

创建一个 MarkdownRenderer.vue 组件：

<template><div v-html="renderedMarkdown"></div>
</template><script>
import MarkdownIt from 'markdown-it';
import katex from 'markdown-it-katex';export default {props: {content: String},computed: {renderedMarkdown() {const md = new MarkdownIt();md.use(katex);return md.render(this.content);}}
};
</script>

使用组件

在父组件中使用 MarkdownRenderer 组件：

<template><div><markdown-renderer :content="markdownContent" /></div>
</template><script>
import MarkdownRenderer from './components/MarkdownRenderer.vue';export default {components: {MarkdownRenderer},data() {return {markdownContent: `
# Markdown with LaTeX Formulas$$
\\begin{align*}
e^x & = 1 + x + \\frac{x^2}{2!} + \\frac{x^3}{3!} + \\frac{x^4}{4!} + \\cdots \\\\& = \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}
\\end{align*}
$$\\[ \\text{均值} (\\bar{x}) = \\frac{1}{N}\\sum_{i=1}^{N} x_i \\]`};}
};
</script>

总结

如果你需要强大的公式渲染能力，推荐使用 MathJax。
如果你需要更快的渲染速度，推荐使用 KaTeX。
如果你需要结合 Markdown 渲染，可以使用 markdown-it 和 markdown-it-katex。

通过以上方法，你可以灵活地在 Vue 项目中渲染 Markdown 内容并支持复杂的 LaTeX 公式块。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

Vue 渲染 LaTeX 公式 Markdown 库

1. 使用 MathJax 渲染 LaTeX 公式

安装依赖

配置 MathJax

创建 Vue 组件

使用组件

2. 使用 KaTeX 渲染 LaTeX 公式

安装依赖

创建 KaTeX 组件

使用组件

3. 结合 Markdown 渲染

安装依赖

创建 Markdown 组件

使用组件

总结

相关文章：

1. 使用 `MathJax` 渲染 LaTeX 公式

2. 使用 `KaTeX` 渲染 LaTeX 公式