Hugo的数学公式支持

较早之前使用了 mmark 格式让 Hugo 支持数学公式,但是问题比较多,不能满足我的需求。最近对此做了一些修正,借鉴其他人的成果,修改了我的 noteworthy 主题,通过 MathJax 实现了对数学公式的支持。

具体的实现步骤如下。

加入 MathJax 渲染代码

在主题目录的部件模板目录 [noteworthy]/layouts/partials/ 下新建一个 mathjax.html 文件用来集中存放渲染代码。在 mathjax.html 中加入以下内容。

{{ if .Params.math }}
<script>
  MathJax = {
    tex: {
      inlineMath: [["$", "$"]],
    },
    displayMath: [
      ["$$", "$$"],
      ["\[\[", "\]\]"],
    ],
    svg: {
      fontCache: "global",
    },
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
{{ end }}

引用 mathjax.html 文件

在生成页面时必须引用的其他任一部件模板中引用上述 mathjax.html,从而使得在生成的页面中间接引用mathjax.html实现链接 MathJax 渲染。可以在 [noteworthy]/layouts/partials/head.html中加入 [noteworthy]/layouts/partials/

<head> 
    <!-- 原始内容 -->

    {{ partial "mathjax.html" . }}
</head>

修改默认创建模板

可以在创建 md 文件时在文件头部的字段中显式指明 math 字段实现数学公式支持,为了避免每次写博客时都重新指明上述字段,直接在默认的创建模板 [BlogRoot]/archetypes/default.md 中加入该字段。顺便也加入一个 <!--more--> 用来指明截断文章摘要的位置。

---
title: " "
date: {{ .Date }}
description: " "
tags: [, ]
draft: true
math: true
---

 <!--more-->

测试示例

可以使用 $行内公式$书写行内公式,可以使用 $$行间公式$$书写行间公式。行内公式示例$ 2 * \sqrt{b^2+4ac} $显示为$ 2 * \sqrt{b^2+4ac} $

为了避免出现一些特殊字符与字符序列的转义问题,行间公式则推荐用<div></div>来包含。如

<div>
$$
\begin{matrix}
1 & x & x^2 \\
1 & y & y^2 \\
1 & z & z^2 \\
\end{matrix}
$$
</div>

显示为

$$ \begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix} $$

参考链接

在Hugo中使用MathJax

Hugo 问题汇总

Hugo添加MathJax数学公式支持

内容声明与版权协议

  • 版权协议:本文采用 CC BY-NC-SA 4.0(署名-非商业性使用-相同方式共享) 协议进行许可。转载、演绎请务必保留作者署名及原文链接,且不得用于商业目的。
  • AI 辅助说明:本博客部分内容(如排版设计、个别局部、特定对话片段等)可能由 AI(LLM大语言模型)辅助生成。作者在此明确声明:本人对文章的核心框架、思想立论与最终呈现拥有绝对主导权与最终解释权。
  • 观点免责:文中明示的由 AI 生成的特定文本、对话输出,仅作为理性探讨以及观点展示,不代表本人真实立场、价值观或事实背书。对于因 AI 幻觉造成的客观事实偏差,请读者审慎甄别。
  • 认知时效性:文章仅代表作者在撰写当下的认知状态与情绪切片。随着个人心智迭代与客观事物发展,作者观点可能发生演变。欢迎基于理性的交流与批评。