Work Life Fun

仕事も人生も楽しむ社労士

KaTeXでインライン数式を表示する方法

※当サイトはリンクに広告ページが含まれている場合があります

KaTeXは、Webブラウザで$\LaTeX$の数学表記を表示するJavaScriptライブラリです。

同様のツールとして、MathJaxが有名ですが、KaTexの方が軽量・高速(KaTeXの公式サイトでレンタリングの速度結果の比較が掲載)ですし、表示結果も私の好みであるため、ブログやサイトでKaTeXを愛用しています。

公式サイトの方法では数式のインライン表示ができない

KaTexを利用するための方法は公式サイトのInstallationで紹介されていますが、これでは数式のインライン表示ができません。

インライン表示とは、$\sum_{i}x_{ij} = 2$のように文中で数式を示す書き方です。

対して、ディスプレイ表示は以下のように数式を文章と分けて1行で示す方法です。

$$\sum_{i}x_{ij} = 2$$

インライン表示のためにはJavaScriptの追記が必要

調べてみたら、「MathJaxからKaTeXに乗り換えた」でも同じ問題が指摘されているため、記事を参考に以下を追記してみたところ無事インライン表示ができました。

<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false}]
    });
  });
</script>

公式サイトでも紹介されていた

今後のバージョンアップなどで表示方法が変更になる可能性もあるため、公式サイトで紹介されていないのは困るな・・・と思っていたら、

でちゃんと紹介されていました。

公式サイトをきちんと読まないとダメですね。。。

【無料】効率的に人事労務の情報を入手しませんか?
  • 毎年のように改正される労働法令への対応に頭を悩ませている
  • 総務や経理などの他の業務を兼務しているので、人事労務業務だけに時間を割けない

といった悩みを抱える企業の経営者・人事労務担当者向けに、公開型のブログでは書けない、本音を交えた人事労務に関する情報・ノウハウ、時期的なトピックに関するメールマガジンを「無料」で配信しています。

過去の配信分は公開しません。

情報が必要な方は、いますぐ以下のフォームから購読の登録をしてください。購読して不要と思ったら簡単に解除できますのでご安心ください。


up_line