导出包含 MathJax 结果的 HTML答案

【问题标题】：Export HTML containing MathJax results导出包含 MathJax 结果的 HTML
【发布时间】：2018-02-24 15:06:25
【问题描述】：

我使用QWebEngineView 将 Markdown 转换为 HTML 并通过 MathJax 呈现数学公式。所有内容都在<div id="placeholder"> 中。然后我使用document.getElementById("placeholder").innerHTML 获取 HTML 内容，其中包含转换后的 Markdown 内容和渲染的 MathJax 输出。最后，我将 HTML 内容输出到一个 HTML 文件中。

但是，当我通过 Chrome 打开导出的 HTML 文件时，公式会丢失 this demo 等 CSS 样式。

那么有什么想法可以按顺序制作公式吗？

我尝试将 MathJax 脚本添加到导出的 HTML 中，但公式会消失。

谢谢！

【问题讨论】：

标签： javascript html css mathjax

【解决方案1】：

您不仅需要获取 HTML，还需要获取 MathJax 的 CommonHTML 输出 jax 生成的 CSS，以及 AssistiveMML 扩展的样式（因为您复制的 HTML 也包括其输出）。下面的代码将为您获取它。

<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function () {
  var styles = document.head.getElementsByTagName("style");
  styles = [].slice.call(styles); // convert to array
  while (styles.length) {
    var sheet = styles.pop();
    if (sheet.innerHTML.match(/^(?:.mjx-chtml|.MJX_Assistive_MathML) \{/)) {
      document.getElementById("sheet").innerHTML += sheet.innerHTML;
    }
  }
});
MathJax.Hub.Queue(function () {
  var math = document.getElementById("math");
  math.parentNode.removeChild(math);
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS_CHTML"></script>

<span id="math">\(x\)</span>

<pre id="sheet">
</pre>

将其放入.css 文件中，作为指向您页面的链接（或将其放入文档头部的<style> 标记中）。那应该为你做。

【讨论】：

嗨，当我将该代码添加到上面示例中的时，它无法正确呈现。知道为什么吗？你可以看到粘贴到这里的代码js.do/code/export_mathjax
你的'
@phubaba，忘记在我上面的回复中标记你。

【解决方案2】：

在您的 HTML 文件中包含 MathJax 脚本：

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>

由于某种原因，内容会淡出并被隐藏，因此需要以下样式来阻止内容被隐藏：

<style>
    .MJXc-processed {
        display: block !important;
    }
</style>

您可以将其添加到 HTML 文件的 head

【讨论】：

谢谢！但它现在会将公式重复三遍。我们需要删除重复的<span> 元素。有什么想法不让 MathJax 重新处理它而只对其进行样式化吗？ demo