如何在页面上显示LaTeX数学公式

在前端开发中，显示LaTeX数学公式通常需要使用一些特定的JavaScript库。其中，最常用的是MathJax和KaTeX。这两个库都能够解析LaTeX代码，并将其转换为高质量的数学公式。

以下是如何使用这两个库的简单示例：

1. 使用MathJax

首先，你需要在你的HTML页面中引入MathJax的脚本。你可以从MathJax的CDN获取它：

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

然后，你可以在页面的任何位置使用LaTeX语法编写数学公式，只需要将它们放在特定的分隔符（如$$或）之间。例如：

<p>这是一个行内公式：\(x^2 + y^2 = z^2\)</p>
<p>这是一个独立公式：$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$</p>

当页面加载时，MathJax会自动扫描页面上的所有LaTeX公式，并将它们转换为高质量的数学符号。

2. 使用KaTeX

与MathJax相比，KaTeX更轻量级，并且渲染速度更快。首先，你需要在你的HTML页面中引入KaTeX的CSS和JavaScript文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofh94zuv0Eqyc5jC8PI/6+5C99FSfMNJ/vR6W7+NX9" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0XcnvsZ" crossorigin="anonymous"></script>

然后，你可以使用KaTeX的render函数来将LaTeX代码转换为数学公式。例如：

<div id="latex-formula">E = mc^2</div>

<script>
    document.addEventListener("DOMContentLoaded", function(){
        var element = document.getElementById('latex-formula');
        var latexString = "E = mc^2";
        katex.render(latexString, element);
    });
</script>