举例说明如何在页面中添加数学公式？

在前端页面中添加数学公式，主要有以下几种方法：

1. MathJax:

MathJax是一个功能强大的JavaScript库，可以将LaTeX或MathML标记渲染成漂亮的数学公式。它被广泛用于学术网站、博客和在线教育平台。

优点: 渲染效果好，支持LaTeX和MathML，使用广泛，社区支持强。
缺点: 需要加载外部库，可能会略微影响页面加载速度。
使用方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Example</title>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> 
</head>
<body>

  行内公式：When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

  独立公式：
  $$
  \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
  $$

</body>
</html>

2. KaTeX:

KaTeX是另一个快速渲染数学公式的JavaScript库。它比MathJax渲染速度更快，但支持的特性略少。

优点: 渲染速度快，轻量级。
缺点: 支持的LaTeX命令比MathJax少一些。
使用方法:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>KaTeX Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4smQIT9BYSaq9b4yvfSc4+cX+SGte+W5uSCe144VibQ/x/pn8+oEVf9+qY" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgB+Qy2g/B/L+L+L/o7hlzzl1CzmsCDS+K5KWMkj+X4x" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYwP0pNPZM7MZSX9El9ATdGF9pUFzQiP6c8/V/l/Q9" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
</head>
<body>
  行内公式：The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

  独立公式：
  $$
  f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi
  $$
</body>
</html>