Vue 渲染 LaTeX 公式 Markdown 库

news2025/3/28 6:09:45

🌟 前言

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

🤖 洛可可白：个人主页

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

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

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