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

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はいくつか用意されていますがこれ以外に変更する方法はわかりませんでした。

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

markdown-it-texmathの導入

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事