我是 Hugo 或任何 Web 开发的新手。我想建立一个个人网站来分享我的数学笔记,这些笔记是用 Markdown 写的。准确地说,我使用了模板hugo-book。但我发现它不支持 markdown 中的数学模式,即如果我在$$
. 我确实找到了一些编写数学方程式的方法,例如,我可以使用{{< katex >}}
,但是每次都为我的降价笔记更改它并不方便。那么,有没有一种方法可以让我$$
在这个模板中编写数学方程?
谢谢!
对于 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.
如您所见,使用简码还可以解决需要在标点符号(例如(
和)之前添加两个反斜杠的问题[
。
(完全披露:这种方法也出现在我博客上的一篇文章中)