Web/DB プログラミング徹底解説

ホーム > Web での数式 > KaTeX のインストール

KaTeX のインストール

ここでは米国 Kahan Academy が開発した数式表示用の JavaScript である KaTeX のインストール方法を説明します。

尚、インストール手順は 2017 年 12月現在のもので、私が管理しているものでもありませんので予告なく変更等があると思います。その点はご了承ください。私がインストールしたときのメモという程度で見てください。

まず、KaTeX のウェブサイトにアクセスします。

画面上部にダウンロードリンクがあります。クリックすると GitHub へのリンクがあります。その先で katex.zip がダウンロードできます。

展開するとその中に css と js ファイルがあります。それらを HTML のヘッダー部分 (<head> から </head> の間) に取り込むだけで完了です。

<link rel="stylesheet" href="katex/katex.min.css">
<script src="katex/katex.min.js"></script>

または Kahan が提供している CDN から直接取り込むことも可能です。

動作確認

以上のように、インストールと言ってもウェブに組み込むのは非常に簡単で、JavaScript と CSS を取り込めば完了です。

さっそく、動作確認をしてみましょう。

次のように div 要素に id を設定します。この div 要素内に数式が記述されます。数式については、例えば次のように katex.render 内に記述します。

<div id="eq1"></div>
<script>
var eq1 = document.getElementById('eq1');
katex.render("\\displaystyle\\sum_{i=1}^n", eq1);
</script>

実行例:

数式が表示されているでしょうか?

Auto-render エクステンション

またコミュニティで Auto-render (自動描画) エクステンションというのが作られており、これを使うと LaTeX で書くように文章中に \[ と \] で囲んだ場所にいきなり、数式を記述することができるようになります。

「DOM 要素を用意して、そこに数式を記述」というステップを踏む必要がなくなり、とても便利です。

Auto-render エクステンションは、github のページに JavaScript のリンクがありますので、まずそれを取り込みます。 次に body タグを閉じる直前で renderMathInElement を呼びます。

<script>
  renderMathInElement(document.body);
</script>

これで文章中に LaTeX 的な書き方で数式を記述してけるようになります。

ホーム > Web での数式 > KaTeX のインストール