写博客经常碰到一个问题,就是数学公式markdown
显示的好好的,而html端却失败,今天就来详细了解一下html渲染latex的原理.

mathjax

mathjax的原理十分简单,直接引用cdn加载就ok了.

例如下面这个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
    
</head>
<body>
hello world
$$x_1=x_2$$
</body>
</html>

显示效果为:

但奇怪的是:

<body>
hello world$x_1=x_2$
$$x_1=x_2$$
</body>

显示为:

即不能显示行内数学符号.

查看文档,发现文档说明了这种情况

The default math delimiters are \$\$...\$\$ and \\\[...\\] for displayed mathematics, and \(...\) for in-line mathematics. Note in particular that the \$...\$ in-line delimiters are not used by default. That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly.

所以,单行显示符最好使用\(…\).

Sakura中的mathjax问题

对于你的博客,会出现这样的bug,从首页进入的文章会加载mathjax,而重新启动则不会.

这里应该是文档的错误,mathjax不应该在theme下的_config.yml设置,而是从post.md中设置.

查看common-article.ejs的最后一段逻辑即可知.

赏

我很好奇