导出 HTML 包含 MathJax 结果

Question

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

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

那么有什么想法可以让公式按顺序排列吗？

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

谢谢！

Answer 1

在您的 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

中

Answer 2

您不仅需要获取 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 文件和 link 到您的页面（或将其放入文档头部的 <style> 标记）。这应该适合你。

导出 HTML 包含 MathJax 结果

Export HTML containing MathJax results

html

javascript

css

mathjax