html - MathJax 或类似 : render arbitrary HTML element inside expression?

Question

我对 Web 应用程序中的数学表达式渲染有特定的需求，虽然到目前为止我主要关注的是 MathJax，但我当然不喜欢它。

我需要的是能够呈现一个数学表达式，其中一个或多个术语本质上可以是任意 HTML 框元素，如下所示:


...如果布局响应 HTML 框的大小(例如括号会自动调整大小以匹配其高度，就像任何其他“正常” LaTeX/MathJax 元素一样)，那将是更可取的，但如果我需要指定一个确切的以像素为单位的大小或类似的东西，那也可以。如果我不得不这样做，甚至可以。在实际的可视化中插入一个“占位符”元素，但可以准确地知道它在输出中的位置，因此我可以将 HTML 元素精确地覆盖在它上面。

换句话说，我对开箱即用甚至是骇人听闻的解决方案持开放态度；只需要一些有用的东西。

也可能相关:我真的只会使用非常基本的 LaTeX 元素:括号、分数、普通运算符。如果这是一个复杂的因素，我什至不需要能够支持上述示例中的求和。

Answer 1

有几种方法可以解决这个问题。您插入占位符并覆盖它的建议是一个，可以按如下方式完成:

<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function () {
  var PX = function (x) {return x.toFixed(2) + 'px'};
  var space = document.getElementById('space');
  var sbox = space.getBoundingClientRect();
  var math = MathJax.Hub.getJaxFor(space).SourceElement().previousSibling;
  var mbox = math.getBoundingClientRect();
  var x = sbox.left - mbox.left;
  var y = sbox.top - mbox.top;
  var html = MathJax.HTML.Element('div', {id:'html', style: {
    position:'absolute', top:PX(y), left:PX(x), 
    width:PX(sbox.width), height:PX(sbox.height), 'line-height':'normal'
  }}, [[
    'table',{style:{height:'100%', width:'100%', background:'red', border:'5px solid green'}}, [[
      'tr',{},[[
        'td',{},['abc']
      ]]
    ]]
  ]]);
  math.style.position = 'relative';
  math.appendChild(html);
});
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML" defer></script>

<div style="xfont-size: 150%">
$$x + \left(\,\cssId{space}{\Space{100px}{55px}{45px}}\,\right) + y$$
</div>

这里我们使用\Space插入所需宽度、高度和深度的空白区域，以及 \cssId标记空间，以便我们以后可以检索它。我们使用 MathJax.Hub.Queue()在 MathJax 排版数学之后排队运行一个函数。此函数查找空间持有者元素并找到 MathJax 用来保存数学的容器元素。它获取每个边界框的信息，并计算叠加层相对于数学的位置。然后它创建了覆盖(在这种情况下内容是硬编码的)，具有适当的大小和药水以覆盖在空间持有人的顶部。

这可行，但有点尴尬，对于显示的方程，如果窗口大小发生变化，覆盖可能不会停留在正确的位置。此外，它仅设置为适用于 CommonHTML 输出。

以下是另一种选择，它使用 <semantics>元素将 HTML 包含到 MathJax 使用的内部 MathML 结构中。它添加了一个新宏 \insertHTML{}这样做。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    styles: {
      //
      // remove CSS for '.mjx-math *'
      //
      '.mjx-math *': {
        display: null,
        '-webkit-box-sizing': null,
        '-moz-box-sizing': null,
        'box-sizing': null,
        'tex-align': null
      },
      //
      // add CSS for .mjx-math span instead
      //
      '.mjx-math span': {
        display: 'inline-block',
        '-webkit-box-sizing': 'context-box !important',
        '-moz-box-sizing': 'context-box !important',
        'box-sizing': 'context-box !important',
        'tex-align': 'left'
      },
      //
      // override display for .mjx-char spans
      //
      'span.mjx-char': {
        display: 'block'
      }
    }
  }
});
MathJax.Hub.Register.StartupHook("TeX Jax Ready", function () {
  var MML = MathJax.ElementJax.mml;
  var TEX = MathJax.InputJax.TeX;
  TEX.Definitions.macros.insertHTML = 'InsertHTML';
  TEX.Parse.Augment({
    InsertHTML: function (name) {
      var html = this.GetArgument(name).replace(/^\s*<!--\s*/,'').replace(/\s*-->\s*$/,'');
      var span = MathJax.HTML.Element('mjx-reset', {style: {display:'inline-block'}});
      span.innerHTML = html;  // serious security risk if users can enter math
      span.setAttribute("xmlns","http://www.w3.org/1999/xhtml");
      var mml = MML["annotation-xml"](MML.xml(span)).With({encoding:"application/xhtml+xml",isToken:true});
      this.Push(MML.semantics(mml));
    }
  });
});
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML" defer></script>

<div style="xfont-size: 150%">
$$x + \left(\,\insertHTML{<!--
<table width="100" height="100"
  style="display:inline-table; vertical-align:-.25em; background:red; border:5px solid green;
  box-sizing:border-box !important">
<tr><td style="text-align:center">abc</td></tr>
</table>
-->}\,\right) + y$$
</div>


$$x+\left(\insertHTML{<!--
<i>this</i> is <b>html</b>
-->}\right)+y$$

因为 MathJax 不会直接处理包含 HTML 标记的数学运算，所以您必须将 HTML 放在注释中，您可以在上面的两个示例表达式中看到。这个版本适用于所有输出格式(甚至是 MathML 输出)，但它确实需要一些配置来覆盖一些适用于内容的 CommonHTML CSS，因为它包含在 MathJax 布局的内部。

在这种情况下，无论窗口发生什么，HTML 都将保持正确定位，并且它具有允许在表达式本身中给出 HTML 的优点。但是请注意，如果您的网站允许用户输入数学，这会带来安全风险，因为这意味着他们可以在您的页面中输入任意 HTML。在这种情况下，您需要在设置 innerHTML 之前清理 HTML。在 InsertHTML功能。