如何使用 javascript 切换 MathJax 渲染与代码？

Question

如何使用 javascript 在渲染视图和普通 text/code 视图之间切换 MathJax 方程式的显示？

例如，如何获得下面示例中的按钮来切换显示此等式：

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

以及当您运行片段时呈现的等式？

var btn = document.getElementById("math-toggle");

btn.onclick = function(event) { 
  // Toggle Math rendering here using MathJax API?
  alert("moo!"); 
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<button id="math-toggle">Toggle Math</button>

<p>
Equation:  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>

Answer 1

一种方法（使用 MathJax API）是使用 PlainSource 输出并重新渲染。

根据情况，在应用程序中跟踪这一点可能更容易（例如，只需获取 MathJax 创建的脚本标签的内容）。

由于用于 TeX 的分隔符只在预处理阶段发挥作用（并且是用户可配置的），因此需要额外的逻辑来跟踪它。

var btn = document.getElementById("math-toggle");

btn.onclick = function(event) {
  if (!btn.checked) {
    MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "CommonHTML"]);
    MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
  } else {
    MathJax.Hub.Queue(["setRenderer", MathJax.Hub, "PlainSource"]);
    MathJax.Hub.Queue(["Rerender", MathJax.Hub]);

  }
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax example</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML">
  </script>
</head>

<body>
  <input id="math-toggle" type="checkbox"  name="mathjax-switch" >
  <label id="mathjax-switch">Replace with plain text source</label>
  <p>
    Equation: $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </p>
</body>

</html>

如何使用 javascript 切换 MathJax 渲染与代码？

how to toggle MathJax render vs code with javascript?

javascript

mathjax