仮想計算機構

IT業界と無縁な派遣社員のブログ

MathJaxの数式表示を後から変えてみる

下記サイトを参考に、MathJaxで数式を表示し、あとから数式の表示を変えてみます。

最初の表示は y=\sin x で、画面をクリックすると y=\cos x に変わるプログラムを作成しました。コードは以下の通りです。

<html>
    <body>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" }},
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    },
    "HTML-CSS": { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
</script>       
        <div id="expr">$y=\sin x$</div>
        <script type="text/javascript" src="mouse.js"></script>
    </body>
</html>

const WIDTH = 500;
const HEIGHT = 500;

const canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;

const context = canvas.getContext('2d');

document.body.appendChild(canvas);

canvas.addEventListener('mousedown', e => {
      let el = document.getElementById("expr");
      el.innerHTML = "$y=\\cos x$";
      MathJax.Hub.Typeset(el);
  });

開発者ツールのコンソールを見ると、以下の警告が出ていました。

WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips.

リタイアしたやつ使わないでーとのことです。
指示に従い、下記サイトにアクセスします。
MathJax CDN shutting down on April 30, 2017. Alternatives available. | MathJax
サイトを読むと、どうやらsrcのURLを変えればいいっぽいです。
実際、以下のようにHTMLを書き換えて実行すると警告は消えました。

<html>
    <body>
        <script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" }},
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    },
    "HTML-CSS": { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
</script>       
        <div id="expr">$y=\sin x$</div>
        <script type="text/javascript" src="mouse.js"></script>
    </body>
</html>

以上です。