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

URL: https://webrandum.net/js-library-mathjax/
公開日: 2022-08-19
更新日: 2022-08-18
カテゴリー: コーディング
タグ: JavaScript, JavaScriptライブラリ
出典: Webrandum（著者: サイトウ マサカズ）

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

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

## MathJax

![MathJax](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-9.png)

[![](https://www.google.com/s2/favicons?domain=www.mathjax.org)MathJax![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.mathjax.org%2F?w=160)MathJaxhttps://www.mathjax.orgBeautiful math in all browsers.](https://www.mathjax.org/)

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

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-4.jpg)MacDownでLaTeX風の記述を使って数式をキレイに表示させるhttps://webrandum.net/macdown-latexよく使っているMarkdownエディタのMacDownにLaTeX風の記述ができたので、色々遊んでみました。LaTeXとは？LaTeXは、複雑なテキストを表現するために作られた組版システムです。結構色んな読み方があるようで「ラテック」「レイテック」「ラテフ」などの読み方があるそうです。もともとはTeX(テフ)というシステムを元に作られたようです。ちなみにTeXは「テック」または「テフ」と読むらしく、「テック」読みが一般的らしいので、自分はそれに合わせてLaTeXは「ラテック」と読むことにします。また、日本ではTeXとLaTeXを日本語化したpT...](https://webrandum.net/macdown-latex)

## 基本的な使い方

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

```
<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箇所レベルであれば画像でもいいと思ってしまいますが、スクリプトを読み込むだけで簡単にプレビューできるので知っておくと役に立つかもしれません。