Vue 渲染 LaTeX 公式 Markdown 库

🌟 前言

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

🤖 洛可可白：个人主页

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

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

🐱 代码获取：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>