如何使用markdown语法在Hugo中编写数学

Question

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

谢谢！

Answer 1

对于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$$

就像你所期望的那样。

但请记住，根据共同点规范(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如何为您提供第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.

正如您所看到的，使用短代码还可以解决在标点符号(如(和[(之前需要添加两个反斜杠的问题。

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

Answer 2

toha主题具有以下layout文件：

toha/layouts/partials/math.html:

<link rel="stylesheet" href="{{ "/katex/katex.min.css" | relURL }}">
<script type="text/javascript" defer src="{{ "/katex/katex.min.js" | relURL }}"></script>
<script type="text/javascript" defer src="{{ "/katex/auto-render.min.js" | relURL }}" onload="renderMathInElement(document.body);">
renderMathInElement(
document.body,
{
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\[", right: "\]", display: true},
{left: "$", right: "$", display: false},
{left: "\(", right: "\)", display: false}
]
}
);
</script>

这允许你使用与@PeterVMorch的答案相同的语法：

Inline mathjax \(a ne b\) or display style $$a ne b$$