はてなブログでKaTeXによる数式組版を行う
はてなブログで数式を表現する
以下に数式組版の例を示します。
\[
x^2 + y^2 = z^2
\]
文中に数式、たとえば \( \sin(\theta) \) などを挿入する。
以下は縦組の式の例です。
\[
\sum^n_{k=1} k^2
\]
\[
\cfrac{\lim_{x \to 0} \cfrac{\sin(x)}{x}}{\cfrac{\alpha}{y+1}}
\]
以下は複数の数式を等号で揃える例です。
\[
\begin{aligned}
a & = b + c \\
d + e & = f
\end{aligned}
\]
組版にKaTeXを使う
はてなブログにおいてMarkdown方式でKaTeXを導入するにはいくつかの工夫が必要です。2019年4月11日現在、以下に述べる方法でKaTeXを利用できます。
head要素でスクリプトを読み込む
はてなブログの管理画面から、設定 > 詳細設定 -> headに要素を追加 に以下のようなコードを追加します。これは公式のGitHubより引用したものです。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
記事中に数式を書く
MarkdownパーサとKaTeXパーサが衝突することを防ぐため、以下のようなテンプレートを用います。
独立した数式
Markdownパーサはdiv要素の中身を解釈せず、そのままHTMLとして処理します。その後にKaTeXが\[と\]で囲まれた部分を独立した数式として解釈し、組版を行います。
<div>\[ x^2 + y^2 = z^2 \]</div>
文中の数式
文中に数式を埋め込む際も同様ですが、適宜マークアップが必要です。デフォルトのデリミタは\(と\)です。
<div> <p>文中に数式、たとえば \( \sin(\theta) \) などを挿入する。</p> </div>
