WebDesigner's Memorandumウェブデザイナーの備忘録

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

LaTexで数式をキレイに表示させるJavaScriptライブラリ「MathJax」

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

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

MathJax

MathJax

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

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

基本的な使い方

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね