Remark.jsにMathJaxの数式を入れる方法

色々とハマりつつも、Remark.jsとMathJaxを使ってプレゼン用スライドを作るのがとても便利なことに気づいたので紹介する。

HTML+JavaScriptでプレゼン用スライドを作る仕組みはいくつかあって、色々と試してみたが、最近はRemark.jsが便利だと思っている。Markdown形式を自動で変換してくれるというのと、配布資料用として印刷してもちゃんとレイアウトしてくれるところがよい。あと、デザインも変に凝らずにシンプルなところがよい。といってもRemark.jsでも、CSSをいじれば凝ったことはいくらでもできるようだが私はやらなない。

仕事柄どうしてもスライドに数式が多くなるので、その点MarkdownでTeX形式の数式を挿入できるのがとても嬉しいと思っていたのだが、色々といじってるとハマってしまった。以下それを説明する。

途中をすっ飛ばしてとりあえずRemark.js+MathJaxを使いたいという人は、最後の「まとめ」だけ読めばよい。

本家のページからテンプレートをもらってきて、次の数式を入力してみる。

$$\sum_{a_i\in A_j}f(a_i)$$

するとちゃんと、
$$\sum_{a_i\in A_j}f(a_i)$$
と表示される。

やった、これで便利！数式も簡単に入れられる！と思って、

$$\sum_{i=1}^n \lVert a_i \Vert_\infty$$

と入れるとなぜがうまく動かない。実際のHTMLを見てみると、「_（アンダースコア）」のペアがMarkdown文法の「強調」の意味に取られて<em> , </em> に変換されてしまうのが問題らしい。前者の例でもアンダースコア2つを使ってるのだがなぜか問題なく、正確なルールはよくわかっていない。

実際にうまくいっていない様子は、こちらを参照してほしい。

ちなみに2つ目の例は、正しくレンダリングされると
$$\sum_{i=1}^n \lVert a_i \Vert_\infty$$
となるはずである。

で、解決策だが、こちらを参考にした。

具体的には、MathJaxのパラメータに「delayStartupUntil=configured」というのを加え、以下のコードを加えればよい。

      MathJax.Hub.Config({
          tex2jax: {
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
          }
      });
      MathJax.Hub.Queue(function() {
          $(MathJax.Hub.getAllJax()).map(function(index, elem) {
              return(elem.SourceElement());
          }).parent().addClass('has-jax');
      });

      MathJax.Hub.Configured();

具体的に何をやっているかまで理解できていないのだが、ここで呼んでいるのはすべてMathJaxのAPIなので、JavaScriptを使った他のシステムでも有効な方法なのかもしれない。

まとめ

以上のことを全部含めた自分用のテンプレートを作ったので公開する。ソースはここにおいてある。

使い方は以下のとおり：

レポジトリからindex.htmlをダウンロードする
index.htmlと同じディレクト内のCONTENT.mdにMarkdownでスライドのテキストを書く
Webサーバを立ち上げる(Python2なら「python -m SimpleHTTPServer」、Python3なら「python -m http.server」とするのが便利)
ブラウザでindex.htmlを開く（サーバでPythonを使った場合は「http://localhost:8000」を開く）

そして、ここで数式の記述にも注意が必要で、バッククォートでくくってやる必要がある。最初の例で言うと次のようにする：

`$$\sum_{a_i\in A_j}f(a_i)$$`

また、インラインの数式の場合も同様で、例えば次のようにする：

`\(\sum_{a_i\in A_j}f(a_i)\)`

サーバが必要なのは、index.htmlからCONTENT.mdをインクルードしてるからで、html内の<textarea id=”source”>～</textarea>にMarkdownを直接書けばサーバは必要ない。また、CONTENT.md以外のファイルをインクルードしたければindex.html?<filename>とすれば動くようになっている。

CONTENT.mdのサンプルはレポジトリに含まれていて、ここにそのデモを用意しておいた。

しばらくはこれで、いわゆるコンサル風のプレゼンとは違う方向に突っ走っていきたい。

追記：

数式の記述でバッククォートを入れるという説明を忘れたので加筆した
Pythonを使ったHTTPサーバの立ち上げ方を加筆した

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル