使用 MathJax 时截断时的奇怪行为

Question

我为一个网站实现了 MathJax，我想要实现的是将文本区域缩短到一定长度并使其可点击，然后在点击时加载更多内容。 MathJax 加载截断的文本很好，但是当我单击文本将其扩展到整个段落时，MathJax 将初始缩短的数学附加到新呈现的整个段落的末尾。有人对这个有经验么？我假设它正在发生，因为截断的文本仍在队列中，因此在加载整个文本后它仍然打印它，但我似乎无法弄清楚如何从队列中清除队列缩短的文本以将其发送到好好工作。任何 help/suggestions 将不胜感激！

这是我的代码的基础：

var showOnClick = function() {
        ctrl.showAll(!ctrl.showAll());
};

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
return m('p.readable.pointer', {onclick: showOnClick},
          ctrl.showAll() ? result.description : description_truncated);

Answer 1

我认为主要原因是您已经拥有所有包含公式部分的跨度，并且当您添加文本时，引擎会尝试将文本字段的所有内容作为源并重新格式化。由于跨度看起来不像数学源，因此它会丢弃它们（这只是一个猜测，但看起来它是这样工作的）。

我的解决方案：不是直接附加一些文本，而是添加一个新的跨度并且只在这个跨度中重新生成公式。注意：如果您要添加的文本被这样剪切，它将不起作用：["my super formula: $x \subset ", "\mathbb{R}$."].

所以，这是我的简化示例（请注意，我使用 ID "txt2" 刷新了跨度）：

<head>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});

  function addText() {
    document.getElementById('txt').innerHTML += '<span id=txt2> ...adding new formula: $x\subseteq X$</span>';
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"txt2"]);
  }
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
  <div id=txt>\neq 0$</div>
  <input type=button onclick="addText()" value="Do it"/>
</body>

Answer 2

您的原始 post 没有显示您是如何向该段落添加附加文本的，但如果它像您的回答一样使用 innerHTML += ...，那么这可能是您的来源重复数学。通过这样做，您将删除当前的 DOM 并将其替换为一个新的，该新的从旧的复制而来，但与它不相同。特别是，您丢失了 MathJax 与旧的 DOM 一起存储的值，这些值记录了已处理的内容，因此当您要求 MathJax 再次排版页面时，看起来所有的数学都是新的，所以它被排版了再次，将排版数学的第二个副本引入文档。

虽然您当前的版本确实避免了重复，但它仍然丢失了从复制的 DOM 到 MathJax 的所有连接。例如，上下文菜单将不再适用于较旧的数学表达式，因为处理它的代码尚未通过设置 innerHTML 复制。所以这不是一个好的方法。

相反，您可以尝试

document.getElementById('txt')
        .appendChild(document.createTextNode('...adding new formula: $x\subseteq X$'));

这不会改变现有的 DOM，而只是添加一个新的文本节点。然后你可以再次排版页面而不会重复。

使用 MathJax 时截断时的奇怪行为

Strange behavior when truncating while using MathJax

javascript

mathjax