Bloggerテーマの作成(6)数式表示ライブラリ KaTeXの導入

MathJax(1)ブログに数式をきれいに表示させる方法-p--qのMathJaxの代わりにKaTeXを導入することにします。

markdown-it-texmathの導入

 

GitHub - goessner/markdown-it-texmath: Support TeX math equations with your Markdown documents.

最初はmarkdown-it-katexを使おうと思いましたがこれはブラウザで使うのは難しそうだったのでこのmarkdown-it-texmathを導入しました。

katexからkatex.min.jsとkatex.min.css、markdown-it-texmathからtemath.min.jsとtexmath.cssのリンクを追加しました。

<script>
const options = {
  linkify: true,
  typographer: true,
  highlight: (str, lang, attrs) => `<pre ${attrs.replace(".line-numbers", "class=line-numbers")}><code class="language-${lang}">${md.utils.escapeHtml(str)}</code></pre>`
};
const md = markdownit(options)
  .use(markdownitSub)
  .use(markdownitSup)
  .use(markdownitIns)
  .use(markdownitFootnote)
  .use(markdownitContainer, "warning")
  .use(markdownItAttrs)
  .use(texmath, {engine: katex, delimiters: 'dollars'});
let post_elems = document.querySelectorAll("div.post-body");
post_elems.forEach(e => {
  e.innerHTML = md.render(e.textContent);
  e.classList.add("markdown-body");
});
</script>

ハイライトしているスクリプトを追加しました。

グローバルオブジェクトのwindowは略記しています。

delimitersにdollarsを指定するとインラインは$、ブロックは$$で挟むと数式表示されます。$$...$$(1)とすると式番号を指定できます。

markdown-it-texmathにdelimitersはいくつか用意されていますがこれ以外に変更する方法はわかりませんでした。