Hugo博客添加LaTeX语法支持

MathJax与Markdown的融合

这里给大家推荐一个在线编辑LaTeX公式的网站LaTeX公式编辑器[^1]

添加 mathjax

定位到themes\PaperMod\layouts\partials，创建mathjax.html并编辑：

<script type="text/javascript"
        async
        src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [['$$','$$'], ['\[\[','\]\]']],
    processEscapes: true,
    processEnvironments: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
    TeX: { equationNumbers: { autoNumber: "AMS" },
         extensions: ["AMSmath.js", "AMSsymbols.js"] }
  }
});

MathJax.Hub.Queue(function() {
    // Fix <code> tags after MathJax finishes running. This is a
    // hack to overcome a shortcoming of Markdown. Discussion at
    // https://github.com/mojombo/jekyll/issues/199
    var all = MathJax.Hub.getAllJax(), i;
    for(i = 0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';
    }
});
</script>

<style>
code.has-jax {
    font: inherit;
    font-size: 100%;
    background: inherit;
    border: inherit;
    color: #515151;
}
</style>

编辑 extend_head

定位到themes\PaperMod\layouts\partials\extend_head.html，添加以下代码：

{{ partial "mathjax.html" . }}

LaTeX 效果展示

先试试行内 $ x^2 +1 = 0 $公式
再试试行间公式

$$ \begin{equation} \begin{split} (a + b)^3 &= (a + b)(a + b)^2 \\ &= (a + b)(a^2 + 2ab + b^2) \\ &= a^3 + 3a^2b + 3ab^2 + b^3 \end{split} \end{equation} $$

多聊一点

在实际的使用过程中，也遇到一些Markdown和MathJax不兼容的问题：

MathJax渲染公式中包含三个以上的大括号{}时候出问题，我们先任意书写一个数学公式：

MommyTalk1667783691090

对应的LaTeX代码为：

\boldsymbol{x}_{i+1}+\boldsymbol{x}_{i+2}=\boldsymbol{x}_{i+3}

公式中出现一对大括号，没有问题

$$ \boldsymbol{x} $$

出现两对大括号，没有问题

$$ \boldsymbol{x}_{i+1} $$

出现三对大括号，没有问题

$$ \boldsymbol{x}_{i+1}+\boldsymbol{x} $$

出现三对以上大括号，无法显示

$$ \boldsymbol{x}{i+1}+\boldsymbol{x}{i+2} $$

我在chrome浏览器查看HTML源码时，发现它的划线“_”丢失，多了“em”标签，应该是直接进行了转译，有已解决问题的小伙伴可以欢迎在评论区分享你解决方法

参考资料:

[1]: LaTeX公式编辑器. https://www.latexlive.com/

[2]: MathJax 与 Markdown 的究极融合. https://yihui.org/cn/2017/04/mathjax-markdown/

[3]: Render LaTeX math expressions in Hugo with MathJax 3. https://geoffruddock.com/math-typesetting-in-hugo/

[4]: MathJax Support中文文档. https://github.com/olOwOlo/hugo-theme-even/issues/40

[5]: V2EX：有无和 typora 一模一样 markdown 渲染规则的博客系统？对于 LaTex 部分不能妥协. https://www.v2ex.com/t/725896

[6]: MathJax Support. https://bwaycer.github.io/hugo_tutorial.hugo/tutorials/mathjax/

[7]: Render LaTeX math expressions in Hugo with MathJax 3. https://geoffruddock.com/math-typesetting-in-hugo/

MathJax与Markdown的融合#

添加 mathjax#

编辑 extend_head#

LaTeX 效果展示#

多聊一点#

MathJax与Markdown的融合

添加 mathjax

编辑 extend_head

LaTeX 效果展示

多聊一点