【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

KaTeXの質問への回答

KaTeX の質問があったため、実例によって回答します。

目次

質問

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

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

回答

行内の数式は Markdown パーサーの干渉を受けます。_ の両側にスペースを入れる必要があります。

【失敗】$\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$

<div class="math-render"> に独立した数式として書けば、スペースを入れる必要はありません。

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

Markdown との干渉は MathJax と同様に発生します。対処方法も基本的に同じです。詳細は以下の記事を参照してください。

ブログのソース

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

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

行内の数式は Markdown パーサーの干渉を受けてしまいます。`_` の両側にスペースを入れる必要があります。

【失敗】$\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$

`<div class="math-render">` に独立した数式として書けば、スペースを入れる必要はありません。

<div class="math-render">\cdots\rightarrow C_q\xrightarrow{\partial_{q}}C_{q-1}\xrightarrow{\partial_{q-1}}C_{q-2}\rightarrow\cdots</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
    let e1 = document.getElementsByClassName("math-render");
    for (let i = 0; i < e1.length; ++i) {
        let e = e1[i];
        if (!e.mathRendered) {
            try {
                katex.render(e.textContent, e, { displayMode: true });
            } catch (ex) {
                e.textContent = ex.message;
            }
            e.mathRendered = true;
        }
    }
    let e2 = document.getElementsByClassName("entry-content");
    for (let i = 0; i < e2.length; ++i) {
        renderMathInElement(e2[i],
            { delimiters: [{ left: "$", right: "$", display: false }] });
    }
});
</script>

その他

KaTeX については以下を参照してください。

KaTeX から TeX のソースを取得できるようにする方法は以下を参照してください。