可以在squarespace上使用MathJax吗？

Question

我目前正在尝试使用 squarespace 创建一个新网站，我想使用 MathJax 来排版数学。 这与 SE 用于在物理上呈现数学的引擎相同。例如 SE。

使用 MathJax 的标准方法是将特定的代码片段放入您想要使用 MathJax 的页面的标题中，如此处所述。 我尝试通过使用“代码注入”功能在 squarespace 中执行此操作，该功能允许将所需的代码放入 squarespace 网站上所有页面的标题中，但数学似乎并未呈现。

这个人声称已经使我上面概述的过程工作了，但是按照他的建议将所需的数学公式输入到 HTML 代码块中后，MathJax 似乎无法工作。 以下是代码示例。

JavaScript：

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

HTML：

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

更新。 似乎 MathJax 实际上确实使用上述过程正确呈现（即，如果您将其输入到 html 代码块中），但仅当您以访问者身份查看该网站时，而不是在登录时进入您的 squarespace 帐户。

Answer 1

我发现使用协议不可知论：

<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

可以嵌入 HTML 代码块中，也可以作为注入代码。

Squarespace 动态生成一些页面，因此在 MathJax 第一次看到页面后可能需要对页面进行排版。在动态加载的内容中插入以下脚本会告诉 MathJax 在下一次机会时再次排版页面。

<script> 
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

Answer 2

由于竞争条件，上述答案对我不起作用。 Squarespace 渲染 Markdown 块的方式是在运行时处理它们并将输出 HTML 动态插入到 DOM 中。如果在我们调用 MathJax API 排版页面后发生这种情况，新插入的元素将显示原始 LaTeX 而不是排版输出。

为了解决这个问题，我将其放在页脚中：

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script>
document.addEventListener("DOMNodeInserted", function(event){
  var element=event.target;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,element.parent]);
});

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

请注意，如果您使用此代码，您应该非常小心，不要将 LaTeX 包装在 HTML 元素的 Markdown 块中，以避免无限循环。

更新：由于 MathJax CDN 已关闭（并允许 Markdown 块中的 LaTeX 修复我上面暗示的问题），我当前使用的代码是：

<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
document.addEventListener("DOMNodeInserted", function(event){
  var element=event.target;
  if (element.tagName.toLowerCase()!= 'script') {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,element.parent]);
  }
});

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

Answer 3

以上答案对我不起作用。 所以我只是按照 https://www.mathjax.org/#gettingstarted 上的说明进行操作，结果成功了。

只需在 Squarespace 代码注入页面的标题中添加以下代码即可：

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>