问题描述
在 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>
解决方法
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$$
如果您经常使用它,可以将其制作成正式的扩展。