在hugo网页中实现latex显示

又一次靠DeepSeek的帮忙，最近搞定了如何在我们这个网站中显示latex 公式的问题。how nice !

$$ \int_0^1 \frac{xdy}{\sqrt{1-x^2y^2}} = \arcsin(x), \text{for} |x|<1

\left| A \right|

$$

用 hugo 编译 markdown 文件的方式产生网页的方法主要参考官方的这个说明文件： Mathematics_in_Markdown 。 但一直不能正常显示。 最近用DeepSeek 找了几个方法试验，终于不经意间解决了问题。

需要3个步骤：

• 修改设置文件 /config.toml

[markup.goldmark.renderer]
unsafe = true  # 允许原始HTML
xHTML = true

[markup]
[markup.goldmark]
  [markup.goldmark.parser]
    attribute = true
    autoHeadingID = true
[params]
math = true

• 配置模板 /layouts/_default/baseof.html ，需要包含下面内容

  {{ if .Param "math" }}
  {{ partial "math.html" . }}
{{ end }}

• 添加 mathjax /layouts/partials/math.html 。注意，这里和官方说明文件不一样，主要是DeepSeek 给出建议改这个文件，发现如果延迟初始化Mathjax的执行就好了。发现是需要保证Mathjax 正确的初始化。

<script>
// 添加初始化检查
if (!window.MathJax) {
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      processEscapes: true
    },
    svg: {
      fontCache: 'global'
    },
    startup: {
      ready: () => {
        MathJax.startup.defaultReady();
        console.log("MathJax is fully initialized");
      }
    }
  };
  
  // 创建并加载 MathJax 脚本
  const script = document.createElement('script');
script.src = 'https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js';
//script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
// 或
// script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-svg.js';
  script.async = true;
  script.id = 'MathJax-script';
  document.head.appendChild(script);
}
</script>