是否可以在 squarespace 上使用 MathJax？

Question

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

使用 MathJax 的标准方法是在您想使用 MathJax 的第一页的页眉中放入特定代码 sn-p，如 here 所述。我试图通过使用“代码注入”功能在 squarespace 中执行此操作，该功能允许将所需的代码放入 squarespace 网站上所有页面的标题中，但数学似乎没有呈现。

This person 声称已经使我在上面概述的过程工作，但是按照他的建议将所需的数学公式输入 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>