网页中插入mathtype公式的代码

最新推荐文章于 2025-01-17 17:51:47 发布

中南自动化学院至渝

最新推荐文章于 2025-01-17 17:51:47 发布

阅读量1.5w

点赞数 1

分类专栏： HTMLCssJs 文章标签： css javascript

转载无需询问，注明原出处即可

本文链接：https://blog.csdn.net/qq_43657442/article/details/122713114

版权

HTMLCssJs 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在网页上直接书写并展示TeX公式，通过引入MathJax库实现公式的渲染，并解决了行内公式不被识别的问题。

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

背景

打算写一些科普介绍性的网页，里面少不得公式的大篇幅，用图片的话以后维护太难，所以想着能不能直接写公式的 tex 代码，然后网页端渲染即可

方法

在head 中引入一个js文件即可

<head>
    <meta charset="UTF-8">
    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>
</head>

直接插入tex公式即可

<p>
   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}.$$

   \(IP(X)=\frac{1}{N^{2}} \sum_{a=1}^{N} \sum_{b=1}^{N} k_{\sigma}\left(x_{b}-x_{a}\right)\)


   to

   $$\varphi^{r}(s, t)=\frac{1}{N-r} \sum_{k=1}^{N-r} \frac{1}{N-r-1} \sum_{j=1, j \neq k}^{N-r}\left(l_{k
   j}^{r}\right)$$

   $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>

效果如下

在这里插入图片描述

注意事项

这样的办法有一个小缺陷（后面会说怎么解决），就是单行公式写在$$.......$$ 之间是没问题的，但是mathtype 默认的行内公式是 $.......$ 这种方法无法解析，原因如下

MathJax使用LaTeX数学定界符，用$...$ 来显示行内公式，用\[...\] 来显示行间公式。它也识别 TeX的分隔符 $$...$$ 来显示行间公式,。由于美元符号在非数学环境中出现的频率太高，这可能会导致某些文本意外地被视为数学，所以并不支持将 $…$ 定义为内嵌数学分隔符。

修复这个缺陷

在head中在加入一行代码就可以了，主要作用就是说让 MathJax 用对待$...$ 的方式来对待 $...$

<head>
    <meta charset="UTF-8">
    <script>
        MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},svg: { fontCache: 'global'}};
    </script>
    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>
</head>