Write Latex functions in html by applying MathJax

本文链接：https://blog.youkuaiyun.com/yusisc/article/details/78169886

本文介绍如何通过在HTML页面中应用MathJax来实现LaTeX数学公式的显示效果。具体步骤包括将MathJax脚本添加到HTML文件头部，并配置内联公式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Applying `MathJax` to get `Latex` effect

To add LaTex function to a html page, one could applying MathJaxmethod adding the following code to head section of the html file.

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

If inline function is also needed, add the following code to the head section, as well.

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$', '$']]},
        messageStyle: "none"
    });
</script>

An example

a simple html page code is as follow.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MathJax AsciiMath Test Page</title>
    <script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}
    });
</script>
</head>
<body>
    <h1>here are some $latex$ functions</h1>
    <p>
        $$\int_0^infty \frac{x}{y}$$
        $$ \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}$$   
        $$ \int_0^\infty \frac{x^3}{e^x-1}dx = \frac{\pi^4}{15}$$
    </p>
</body>
</html>
</html>

Copy above code save, save it to a text file and rename the file to page.html. Then, open it in a web browser, you will find a page looks as follow.

这里写图片描述