javascript - 将 Mathjax 应用于任意元素

Question

我有 emacs org 生成的 HTML，默认情况下包含 dvipng 方程式。没关系，我想为那些禁用 JS 的人提供一个很好的后备。生成的图片和结果<img>标签在其 alt 中具有完整的 LaTeX 源代码属性。我还调整了代码以将特定类应用于所有此类图像，因此它在 JS 端变得更简单，这不是我的强项。

MathJax 文档列出了几种不同的配置以及一种自己自定义配置的方法；我没有看到选择器函数或任何可以应用 Mathjax 来满足我需要的东西。我知道我可以编写自己的 DOM-munging JS，然后调用 Mathjax，但 Mathjax 本身肯定会屈服于这种功能吗？

这是生成的 HTML 中的示例。

<img class="dvipng" src="upload/blog_ff4e604.png"
     alt="$\frac{1}{2\pi{}i}\int_C\frac{f'(z)}{f(z)}{\rm d}z = N_0(f)$">

Answer 1

MathJax 不直接包含此内容，但您可以执行以下操作:

<script type="text/x-mathjax-config">
MathJax.Extension.myImg2jax = {
  version: "1.0",
  PreProcess: function (element) {
    var images = element.getElementsByTagName("img");
    for (var i = images.length - 1; i >= 0; i--) {
      var img = images[i];
      if (img.className === "dvipng") {
        var script = document.createElement("script"); script.type = "math/tex";
        var match = img.alt.match(/^(\$\$?)(.*)\1/);
        if (match[1] === "$$") {script.type += ";mode=display"}
        MathJax.HTML.setScript(script,match[2]);
        img.parentNode.replaceChild(script,img);
      }
    }
  }
};
MathJax.Hub.Register.PreProcessor(["PreProcess",MathJax.Extension.myImg2jax]);
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

它定义了一个新的预处理器，用于查找您的图像并从 ALT 标签中提取数学运算。这假设您使用 $...$用于在线数学和$$...$$用于显示数学。

此代码在将图像转换为 MathJax 时删除了图像 <script>标签。可以将图像移动到预览范围，它将在 MathJax 处理 TeX 代码之前显示。这有点复杂，但可以通过更多的工作来完成。我会把它留给感兴趣的读者。 :-)