Как включить MathJax рендеринга против кода с помощью JavaScript? - PullRequest
Новая
       7

Как включить MathJax рендеринга против кода с помощью JavaScript?

0 голосов
/ 05 июня 2018

Как я могу переключить отображение уравнения MathJax между его визуализированным представлением и представлением простого текста / кода, используя javascript?

Например, Как я могу получить кнопку в примерениже, чтобы переключить уравнение между отображением этого:

$$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>

1 Ответ

0 голосов
/ 05 июня 2018

Один из способов (с использованием API MathJax) - использовать вывод 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>
...