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

Question

如何使用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>

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渲染与代码？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-06-05 07:23:43

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-06-05 07:23:43

解决方案1
2 已采纳 2018-06-05 07:23:43