初めに

どうも、最近 Ruby on Rails 初めた人です。~~（記事と全く関係ない）~~

今回の記事は。
MathJaxというライブラリを使って数学のwebアプリを作っていたとき、動的に処理できなくて困ったので記事にまとめます。

MathJaxってなに？

MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。MathJaxはApache Licenseのもとでオープンソースソフトウェアとしてリリースされている。
MathJax - Wikipedia

まぁ、要するに「カッコいい数式を表示できる機能」ってこと

例

二次方程式　[x=ax^2+bx+c]　の解は \\
x = {-b \pm \sqrt{b^2-4ac} \over 2a}

こんなかんじ

どうやって使うの？

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

↑こいつを <head> タグの中に入れるだけ！

あとは、 <body> タグの中に数式を放り投げるだけ。
数式は、ぐぐったら出てくるから、自分で調べて。

自分がしたかったこと

ボタンを押して数式を表示する
「スタートボタンを押して、事前に用意してあった数式を表示して、回答する」
という簡単な計算アプリを作っていた。
数式を表示するだけならすぐに実行できたが、.innerHTML もしくは .html を書き換えると、うまく行かなくなった。

結論

// head
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.4/math.min.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js" charset="utf-8"></script>

// body
<div id="math">\\begin\{align\}半径 = \\frac{直径}{2}\\end\{align\}</div>
<button onClick="changeMath()"></button>

// script.js

function changeMath() {
  $("#math").html("\\begin\{align\}");

  $("#math").append("y=\\sin(\\theta+\\frac{\\pi}{2})+1");

  $("#math").append("\\end\{align\}");
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"quMain"]);
}

解説

表示されたボタンを押すと changeMath() が発火する。
そうすると、表示されていた数式が上の数式から下の数式に置き換わる。

半径 = { 直径 \over 2 }

y=\sin(\theta+\frac{\pi}{2})+1

以上

MathJaxを動的に処理した

初めに

MathJaxってなに？

例

どうやって使うの？

自分がしたかったこと

結論

解説