[はてなブログ] KaTeXのテスト

katex.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
  function render(src, elem, displayMode) {
    if (elem.rendered) return;
    try {
      katex.render(src, elem, { displayMode });
    } catch (ex) {
      elem.textContent = ex.message;
    }
    elem.rendered = true;
  }
  for (const elem of Array.from(document.getElementsByClassName("math-k"))) {
    const t = elem.textContent;
    const div = document.createElement("div");
    render(elem.textContent, div, true);
    elem.parentNode.replaceChild(div, elem);
  }
  for (const elem of Array.from(document.getElementsByTagName("code"))) {
    const t = elem.textContent;
    if (t.length > 2 && t.startsWith("$") && t.endsWith("$")) {
      const span = document.createElement("span");
      render(t.substring(1, t.length - 1), span, false);
      elem.parentNode.replaceChild(span, elem);
    }
  }
});
</script>

行内の数式は `` `$`` ～ ``$` `` で囲みます。

【例】`$x^2=y^2+z^2$` を `$x$` について解けば `$x=\pm\sqrt{y^2+z^2}$` です。

独立した数式は ` ```math-k` ～ ` ``` ` で囲みます。

```math-k
x=\frac{-b±\sqrt{b^2-4ac}}{2a}
```

説明記事

• KaTeXのテスト