knowledge-vault/sources/references/开发笔记/Hugo/解决Hugo数学公式显示.md

解决Hugo数学公式显示

更新Hugo版本

添加配置

目前发现添加markup.goldmark.extensions会启动服务报错，直接引用Js和CSS文件可以解决问题。

// ...existing code...
[markup.goldmark.extensions.passthrough]
  enable = true
  [markup.goldmark.extensions.passthrough.delimiters]
    [[markup.goldmark.extensions.passthrough.delimiters.block]]
      start = "$$"
      end = "$$"
    [[markup.goldmark.extensions.passthrough.delimiters.inline]]
      start = "$"
      end = "$"
[markup.goldmark]
  [markup.goldmark.renderer]
    unsafe = true  # 允许嵌入 HTML/JS
// ...existing code...

注意事项：

1. Goldmark 的 passthrough 只是让 $ 和 包裹的内容原样输出到 HTML，并不会自动渲染为数学公式。你还需要在主题的模板中引入 MathJax 或 KaTeX 的 JS/CSS 文件，才能让公式在网页上显示为数学公式。
2. unsafe = true 已经允许 HTML/JS 注入，方便后续引入渲染库。

引入 MathJax 或 KaTeX

在你的主题的 head 或 footer 模板文件中添加 MathJax 或 KaTeX 的 CDN 引用。例如：

<!-- 在 layouts/partials/head.html 或 footer.html 中添加 -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}
      ]
    });
  });
</script>