ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」

PC上で数式をキレイに表示させたい場合にはLaTeXという記述方法で入力すると、キレイにプレビューされます。

ウェブサイト上でも同様に表示させたい場合は、このLaTeXをプレビューするJavaScriptライブラリの「MathJax」を使うとプレビューできます。

MathJax

MathJax

MathJax

https://www.mathjax.org

Beautiful math in all browsers.

MathJaxはLaTeXをウェブ上でプレビューするJavaScriptライブラリです。

LaTeXに関しての詳細は、過去にMacDownというアプリを使用してプレビューする方法の記事を書いたときに説明しているので、ぜひそちらをご覧ください。

Webrandum

MacDownでLaTeX風の記述を使って数式をキレイに表示させる

https://webrandum.net/macdown-latex

よく使っているMarkdownエディタのMacDownにLaTeX風の記述ができたので、色々遊んでみました。LaTeXとは？LaTeXは、複雑なテキストを表現するために作られた組版システムです。結構色んな読み方があるようで「ラテック」「レイテック」「ラテフ」などの読み方があるそうです。もともとはTeX(テフ)というシステムを元に作られたようです。ちなみにTeXは「テック」または「テフ」と読むらしく、「テック」読みが一般的らしいので、自分はそれに合わせてLaTeXは「ラテック」と読むことにします。また、日本ではTeXとLaTeXを日本語化したpT...

基本的な使い方

下記のスクリプトタグを読み込みます。

<script src=' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=default' async></script>

あとはHTML内で「\[」と「\]」で囲んだ部分がLaTeXとして認識されます。

\[
x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a} \tag{1}
\]

認識される記号を変更する

デフォルトだと「\[」と「\]」の記号で囲った部分が認識されますが、他の記号にしたい場合は下記のコードで変更できます。

<script>
MathJax.Hub.Config({
  tex2jax: {
    inlineMath:[
      [
        '$', //開始記号
        '$' //終了記号
      ]
    ]
  }
});
</script>

上記のコードを入力したら「$」で囲った部分がLaTeXとして認識されるので、下記の記述でプレビューされます。

$x = \frac{-b\pm\sqrt{b^{2}-4ac}}{2a} \tag{1}$

複雑な数式をプレビューしたいことはかなり少なく、1箇所レベルであれば画像でもいいと思ってしまいますが、スクリプトを読み込むだけで簡単にプレビューできるので知っておくと役に立つかもしれません。