« 状態遷移図を描きたい | トップページ | 数式を動的に変える(プレビューの応用) »

2014年6月23日 (月)

MathJax のプレビュー

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

MathJax で数式を書く時は、試験的に簡単なページを書いてファイルに保存し、それをブラウザで表示して確認するということをしていました。しかし、複雑な式だと何度も修正して、その度にファイルに保存することになり、あまり気が進みません。インターネット上には、プレビュー用のページが幾つか公開されていますが、それらは XyJax (\(\xypic\)) には対応していません。そこで、それらを参考にして、プレビュー用のページを自作することにしました。自作したページをローカルに置いて、そこへアクセスして数式をプレビューします。

参考にしたページでは jQuery を使用しているのですが、あまりライブラリは使用したくないので(もちろん MathJax や XyJax は別です)素の JavaScript で作成しました。それが下記です。


<html>
<head>
  <title<MathJax Preview>/title>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: { inlineMath: [['\\(','\\)']]},
      TeX: {extensions: ['XyJax の URL']}
    });
  </script>
  <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
  <script>
    function makePreview(){
      preview.innerHTML = code.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
    }
  </script>
</head>

<body>
  <span style="font-weight:bold">MathJax コードを入力して、変換ボタンをクリックして下さい。</span><br />
  <textarea id="code" cols="80" rows="20">\[&#10;&#10;\]</textarea><br />
  <button type="button" onclick="makePreview()">変換</button><br />
  <div id="preview"></div>
</body>
</html>

textarea に MathJax コードを入力して [ 変換 ] ボタンをクリックすると、そのボタンの下( preview 領域)に整形された数式が表示されます。

textarea に入力したデータを参照するのに、始めは code.innerHTML を試したのですが、うまく行きませんでした。いろいろ検索をして、 code.value で参照できることが分かりました。逆に、 previewpreview.value ではダメでした。

code.value.replace() しても、 code.value 自体は replace されないようです。したがって


      code.value.replace(/</g, "&lt;");
      code.value.replace(/>/g, "&gt;");
      preview.innerHTML = code.value;
のように3行に分けて書いたらダメで、 preview.innerHTML には replace() の戻り値を代入しないといけないようです。

« 状態遷移図を描きたい | トップページ | 数式を動的に変える(プレビューの応用) »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/59861202

この記事へのトラックバック一覧です: MathJax のプレビュー:

« 状態遷移図を描きたい | トップページ | 数式を動的に変える(プレビューの応用) »