作成: 2019年04月09日
更新: 2021年03月29日
今はNode.jsでレンダリングしています->MathJaxをNode.jsで動かす
DjangoでQiita風のブログを作ろう
によりmarked.jsを用いてこの記事のようなブログをmarkdownで書くことができた。
しかしmarked.jsだけではQiitaやよくあるmarkdownエディターのように数式を挿入することができない。Qiitaなどのように$で囲むことでLaTeX記法を用いて数式を挿入できるようにしたい。
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タグで囲って無理やり表示させている)
$はバックスラッシュでエスケープすれば問題なく使える。
バックスラッシュとかっこの連続なんてそうそう使わないから問題ない?