HTML中显示LaTeX公式的多种方法

学习笔记作者：admin日期：2025-05-26点击：32

摘要：介绍如何在HTML页面中使用LaTeX公式，包括MathJax、KaTeX以及不使用JS库的方案。

HTML中显示LaTeX公式的多种方法

MathJax

MathJax 是最常用的 JavaScript 库之一，可以轻松地在网页中渲染复杂的数学公式。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>数学公式示例</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>
</head>
<body>

<h2>普朗克长度：</h2>

$$
\ell_P = \sqrt{\frac{\hbar G}{c^3}} \approx 1.616 \times 10^{-35} \ \text{m}
$$

</body>
</html>

KaTeX

KaTeX 是另一个轻量级且快速的 JavaScript 库。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>KaTeX 示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"
    onload="renderMathInElement(document.body);"></script>
</head>
<body>

<h2>普朗克长度：</h2>

$$
\ell_P = \sqrt{\frac{\hbar G}{c^3}} \approx 1.616 \times 10^{-35} \ \text{m}
$$

</body>
</html>

不使用JS库

如果不想使用 JavaScript，可以使用图片或 Unicode 字符。

<img src="planck_length_formula.png" alt="Planck Length Formula">

或者：

<p>ℓ<sub>P</sub> = √(ℏG/c³) ≈ 1.616 × 10⁻³⁵ m</p>

总结

方法	是否需要 JS	易用性	渲染质量	推荐程度
MathJax	✅ 是	高	高	⭐⭐⭐⭐
KaTeX	✅ 是	高	高，更快	⭐⭐⭐⭐⭐
图片/Unicode	❌ 否	低	一般	⭐