MathJax 和输入

Question

在 MathJax 中处理分数和方程对齐时，我正在尝试使用 HTML 接收文本输入。当我这样做时，数学排版不起作用（如下所示）。有什么办法可以实现吗？

如有任何帮助，我们将不胜感激！

<html>
<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\(', '\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
Let $f(x)=\frac{x}{3}$.</br>
Then, 
$f(9)=\frac{<input type="text" size="3">}{3}=3$.</br></br> 
</html>

Answer 1

MathJax 不会处理包含 HTML 标签（<br> 和注释除外）的数学运算，所以你是对的，你所做的是行不通的。但是有一个漏洞可以用来获取输入字段，如 this post 中所讨论的那样，它使用 MathML <semantics> 标记将 HTML 放入表达式中。

<script>
MathJax = {
  tex: {packages: {'[+]': ['input']}},
  startup: {
    ready() {
      const Configuration = MathJax._.input.tex.Configuration.Configuration;
      const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
      const TEXCLASS = MathJax._.core.MmlTree.MmlNode.TEXCLASS;
      
      new CommandMap('input', {input: 'Input'}, {
        Input(parser, name) {
          const xml = parser.create('node', 'XML');
          const id = parser.GetBrackets(name, '');
          const w = parser.GetBrackets(name, '5em');
          const value = parser.GetArgument(name);
          xml.setXML(MathJax.startup.adaptor.node('input', {
            id: id, value: value, style: {width: w}, xmlns: 'http://www.w3.org/1999/xhtml'
          }), MathJax.startup.adaptor);
          xml.getSerializedXML = function () {
            return this.adaptor.outerHTML(this.xml) + '</input>';
          }
          parser.Push(
            parser.create('node', 'TeXAtom', [
              parser.create('node', 'semantics', [
                parser.create('node', 'annotation-xml', [
                  xml
                ], {encoding: 'application/xhtml+xml'})
              ])
            ], {texClass: TEXCLASS.ORD})
          );
        }
      });
      Configuration.create('input', {handler: {macro: ['input']}});

      MathJax.startup.defaultReady();
    }
  }
};
</script>
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

$$ \int_{\input[sub][1em]{0}}^{\input[sup][1em]{1}} \input[integrand][10em]{}\, dx$$

如果您经常使用它，可以将其制作成正式的扩展。

MathJax 和输入

MathJax & Inputs

html

javascript

input

mathjax