BETA

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

投稿日:2020-03-29
最終更新:2020-03-29

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  
      },  

結果

以下のように数式を表示できた
https://banatech.net/blog/view/18
欠点としてバックスラッシュとかっこの連続をうかつに使えなくなってしまう。(上記ではpreタグで囲って無理やり表示させている)
$はバックスラッシュでエスケープすれば問題なく使える。
バックスラッシュとかっこの連続なんてそうそう使わないから問題ない?

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

https://banatech.net のクロスサイト

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう