时间戳

首页 > 解决方案 > 如何使用 Markdown 语法在 Hugo 中写数学？

markdown - 如何使用 Markdown 语法在 Hugo 中写数学？

问题描述

我是 Hugo 或任何 Web 开发的新手。我想建立一个个人网站来分享我的数学笔记，这些笔记是用 Markdown 写的。准确地说，我使用了模板hugo-book。但我发现它不支持 markdown 中的数学模式，即如果我在$$. 我确实找到了一些编写数学方程式的方法，例如，我可以使用{{< katex >}}，但是每次都为我的降价笔记更改它并不方便。那么，有没有一种方法可以让我$$在这个模板中编写数学方程？

谢谢！

标签： markdownmathjaxhugotexkatex

解决方案

对于 Mathjax 3，把它放在页面源代码的某个地方。我把它放进去layouts/partials/head-additions.html，但也许这是特定于 ananke 主题的：

<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>

现在你可以把它放在你的页面上并渲染它：

Raw Mathjax block:
 

$$a_4 \ne b_4$$

就像你期望的那样。

请记住，尽管根据commonmark 规范（Hugo 遵循它，因为它在内部使用了 goldmark），您需要在标点符号之前添加两个反斜杠，例如(和[。所以：

This shows as Mathjax \\(a \ne b\\), but this doesn't \(a \ne b\)

Likewise, this shows as Mathjax

\\[a \ne b\\]

but this doesn't:

\[a \ne b\]

当然，您可以通过使用来避免这种情况$$ TeX Source $$。

你可以在这里停下来。

但我更进一步，因为我不喜欢 Mathjax 如何为您提供如issue 131中所述的无样式内容 (FOUC) 。我修改了该问题中建议的方法。将其放在页面源代码中，而不是<script>上面的两个简单标签：

{{- if or (.HasShortcode "mathjax/block") (.HasShortcode "mathjax/inline") -}}
<style>
.has-mathjax {
    visibility: hidden;
}
</style>

<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>

<script>
window.MathJax = {
  startup: {
    pageReady: () => {
      return MathJax.startup.defaultPageReady().then(() => {
        for (let element of document.getElementsByClassName("has-mathjax")) {
            element.style.visibility = "visible"
        }
      });
    }
  }
};
</script>
{{- end -}}

把这个放在layouts/shortcodes/mathjax/block.html：

<div class="has-mathjax">
{{ .Inner }}
</div>

这在layouts/shortcodes/mathjax/inline.html：

<span class="has-mathjax">{{ .Inner }}</span>

现在你可以把它放在你的页面源代码中：

Mathjax block:
  
{{< mathjax/block >}}
\[a \ne 0\]
{{< /mathjax/block >}}

Inline shortcode {{< mathjax/inline >}}\(a \ne 0\){{< /mathjax/inline >}} with
Mathjax.

如您所见，使用简码还可以解决需要在标点符号（例如(和）之前添加两个反斜杠的问题[。

（完全披露：这种方法也出现在我博客上的一篇文章中）

推荐阅读