marked.jsで数式をLaTeX式で挿入したい

作成: 2019年04月09日

更新: 2021年03月29日

今はNode.jsでレンダリングしています->MathJaxをNode.jsで動かす

marked.jsに数式を入れたい

DjangoでQiita風のブログを作ろう
によりmarked.jsを用いてこの記事のようなブログをmarkdownで書くことができた。
しかしmarked.jsだけではQiitaやよくあるmarkdownエディターのように数式を挿入することができない。Qiitaなどのように$で囲むことでLaTeX記法を用いて数式を挿入できるようにしたい。

MathJax

MathJaxはブラウザ上で特定の範囲でLaTeX記法を使えるようになるJavaScriptライブラリである。これを用いて記事のLaTeXで書かれた数式を変換する。
最初に書いた記事(DjangoでQiita風のブログを作ろう)のmarked.jsの設定に加え、以下のMathJaxの設定を追加する。

<!--cdn-->
<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },
      "HTML-CSS": {
        availableFonts: ["TeX"]
      }
    });
</script>

まず

<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

によりCDNでMathJaxを有効にしている。

またMathJaxはデフォルトだと

\[と\]

\(と \)

で囲んだ部分を数式として認識する。これをVS Codeのmarkdown拡張の数式などと同様に$$や$
で囲んだ部分を数式として認識するように以下のようにしている。

tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
        processEscapes: true
      },

結果

以下のように数式を表示できた

欠点としてバックスラッシュとかっこの連続をうかつに使えなくなってしまう。(上記ではpreタグで囲って無理やり表示させている)
$はバックスラッシュでエスケープすれば問題なく使える。
バックスラッシュとかっこの連続なんてそうそう使わないから問題ない?