时间戳

首页 > 解决方案 > 如何使用 javascript 切换 MathJax 渲染与代码？

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

问题描述

如何使用 javascript 在渲染视图和纯文本/代码视图之间切换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>

标签： javascriptmathjax

解决方案

一种方法（使用 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>

推荐阅读