質問

KaTeX でうまく表示できません。

$\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots$

回答

KaTeX をスクリプトによって呼び出すことで、はてなブログ特有の問題が回避できます。

$\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots$

独立した数式として書くこともできます。

\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots

ブログのソース

ブログの設定（ヘッダのカスタマイズなど）はデフォルトのまま、KaTeX 関係をベタ書きしただけで使えます。

※ テスト用の簡易的な使用方法です。本格的に使うのであれば、ブログの管理画面を開いて「設定 → 詳細設定 → <head>要素にメタデータを追加」でカスタマイズした方が良いでしょう。

KaTeX をスクリプトによって呼び出すことで、はてなブログ特有の問題が回避できます。

`$\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots$`

独立した数式として書くこともできます。

```math-k
\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots
```

<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>