MathJax + AngularJS で数式の編集と表示

JavaScript

LaTeX の数式表示に JavaScript・HTML・CSS といった Web 技術で数式を表示できる MathJax が便利です。

簡易な数式編集ツールなら簡単に作れそうだったので、AngularJS を試すついでに以下のようなサンプルを作ってみました。

  • TextArea に入力した数式を動的にプレビュー表示

サンプルソースは http://github.com/fits/try_samples/tree/master/blog/20140111/

数式編集のサンプル

MathJax で特定の要素の数式表示を更新するには下記のように処理します。

  • (1) MathJax が適用された要素を取得
  • (2) MathJax.Hub.Queue() を使って (1) の要素へ数式を表示

なお、数式を表示する要素には MathJax の適用対象となるように ${}$ を設定しておきます。

下記サンプルでは、TextArea の内容に変化が生じるとプレビュー表示を更新するよう AngularJS の ng-change を使いました。

index.html
<!doctype html>
<html ng-app>
<head>
    <title>MathJax + AngularJS sample</title>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
        });
    </script>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    <script>
        function mathjax($scope) {
            $scope.formula = '';

            $scope.changeFormula = function(formula) {
                // (1) 要素の取得
                var el = MathJax.Hub.getAllJax('result')[0];
                // (2) 数式の表示
                MathJax.Hub.Queue(['Text', el, formula])();
            };
        }
    </script>
</head>
<body>
    <div ng-controller="mathjax">
        <textarea ng-model="formula" ng-change="changeFormula(formula)"></textarea>
    </div>
    <br />
    <!-- プレビュー表示 -->
    <div id="result">${}$</div>
</body>
</html>
画面例

f:id:fits:20140111195353p:plain