koturnの日記

転職したい社会人2年生の技術系日記.ブログ上のコードはコピペ自由です.

previm + MathJax 3.X

TL;DR

previmでMathJax3.Xを使用できるようにする.

背景

previm/previmMarkdownのプレビューを可能にするプラグインでとてもベンリである. これにMathJaxを組み合わせると,数式が書けるようになり,ものすごくベンリになる.

このMathJaxであるが,2019/9にVer3.0がリリースされていたらしい. 今までVer2.X系を使用していたが,なるべく新しいものを使いたいものである. 実際,MathJax3はMathJax2と比べて処理が高速になったらしい.

しかし,メジャーバージョンアップデートだけあって,2.X系の記述とは異なるものにする必要がある.

現行のWebにあるPrevim + MathJaxの情報はMathJax Ver2.X系のものばかりであるため,Ver3.Xを使用する方法を書くのは意義があると考えた.

変更点

変更点は下記の通りである(git diff の出力結果).

diff --git preview/_/index.html preview/_/index.html
index b08364d..81f142c 100644
--- preview/_/index.html
+++ preview/_/index.html
@@ -38,6 +38,18 @@
             <script src="../_/js/lib/zip_deflate.js"></script>
             <script src="../_/js/lib/plantuml.js"></script>
             <script src="../_/js/previm.js"></script>
+            <script>
+            MathJax = {
+              tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                tags: 'ams'
+              },
+              chtml: {
+                matchFontHeight: false
+              }
+            };
+            </script>
+            <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
             <div id="monitor"></div>
         </div>
     </body>
diff --git preview/_/js/previm.js preview/_/js/previm.js
index 84f1ae7..4149808 100644
--- preview/_/js/previm.js
+++ preview/_/js/previm.js
@@ -98,6 +98,12 @@
       Array.prototype.forEach.call(_doc.querySelectorAll('pre code'), hljs.highlightBlock);
       autoScroll('body', beforePageYOffset);
       style_header();
+
+      if (typeof MathJax.texReset === 'function') {
+        MathJax.texReset();
+        MathJax.typesetPromise();
+        autoScroll('body');
+      }
     }
   }

tags: 'ams' は数式に番号を付けたくない場合は不要である. tex-chtml.js の読み込みが終わるまで,MathJax.texReset 等のメソッドが生えてこないので,previm.js の関数内では typeof を使用して,メソッドが存在しなければ呼び出しをしないようにしている.

CDNの利用が嫌なら(オフライン環境でもMathJaxを利用したい場合など),ローカルにMathJax一式を落としてきて指定するとよい.

おまけ

このブログは以前までMathJax2を利用していたが,ついでなのでMathJax3を利用するようにした.

参考