JavaScript - MathJaxで数式表示

公開日：2019-05-16 更新日：2019-08-20

1. 概要

MathJaxは、数式を表示するためのJavaScriptライブラリです。
数式の表記方法は、TeX、LaTeXなどに対応しています。
そのため、数式の表記方法がわからない場合は、MathJaxのサンプルを探すよりも、TeX や LaTeX のサンプルを探してください。
google の画像検索で「TeX 積分」などで検索すると、すぐに見つかると思います。

MathJaxの公式サイト
MathJaxがサポートしているLaTexのコマンド一覧

2. 使い方

以下のように<script>でライブラリを読み込み、数式を $$ で囲むだけです。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
</head>
<body>
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
</body></html>

結果

3. サンプル

以下の数式の TeX のコマンドは、
数式を右クリックして、「Show Math As」→「TeX Commands」か、
HTMLのソースで確認できます。


Tag

New Article