Ghost CMSでKaTeXを使って数式を表示する方法
Ghost CMSには数式レンダリング機能が組み込まれていないため、外部ライブラリを導入する必要がある。本記事では、Khan Academyが開発した軽量な数式レンダリングライブラリであるKaTeXをGhostに導入する手順を解説する。
KaTeXの読み込み
GhostのCode Injection機能を使い、サイト全体のヘッダーにKaTeXのCSSとJavaScriptを追加する。
Settings > Code injection > Site Header に以下のコードを貼り付ける。
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css>" integrity="sha384-WcoG4HRXMzYzfCgiyfrySxx90XSl2rxY5mnVY5TwtWE6KLrArNKn0T/mOgNL0Mmi" crossorigin="anonymous">
<script defer src="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js>" integrity="sha384-J+9dG2KMoiR9hqcFao0IBLwxt6zpcyN68IgwzsCSkbreXUjmNVRhPFTssqdSGjwQ" crossorigin="anonymous"></script>
<script defer src="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js>" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
これはKaTeX公式ドキュメントのStarter Templateに掲載されているコードである。3つの要素で構成されている。
- katex.min.css : 数式の表示スタイルを定義するスタイルシート
- katex.min.js : KaTeX本体。
defer属性により、HTMLのパース完了後に実行される - auto-render.min.js : ページ内のテキストから数式デリミタを検出し、自動的にレンダリングするKaTeXの拡張機能。読み込み完了時に
renderMathInElement(document.body)を呼び出し、<body>内の数式を一括処理する
integrity属性はSubresource Integrity（SRI）によるハッシュ検証で、CDNから配信されるファイルが改ざんされていないことを保証する。バージョンを変更する場合は、対応するハッシュ値も更新する必要がある。
数式の書き方
KaTeXのauto-render拡張は、既定で以下のデリミタを認識する。
- インライン数式 : 数式を
\(と\)で囲む。文中に埋め込む形で表示される - ディスプレイ数式 : HTMLカードのなかで数式を
$$で囲む。独立した行に中央揃えで表示される
Ghostでの注意点
Ghostのエディタは通常のテキストブロックでMarkdownパーサを通すため、バックスラッシュやその他の記号がエスケープされ、数式が正しくレンダリングされないことがある。
この問題を回避する最も確実な方法は、HTMLカードを使うことである。GhostエディタでHTMLカードを挿入し、その中にデリミタ付きの数式を直接記述すれば、Markdownパーサの影響を受けずにKaTeXが正しく処理できる。
数式が意図通りに表示されない場合は、以下を試すとよい。
- 該当する段落を一度削除し、空白や記号を修正した上で Ctrl+Shift+V（書式なしペースト）で貼り直す
- ブラウザのDevToolsを開き、Consoleに出力されるKaTeXのエラーメッセージを確認する。パースに失敗した数式やデリミタの問題が具体的に表示される
対応関数の一覧
KaTeXが対応するTeX関数の一覧は、公式ドキュメントのSupported Functionsページにまとめられている。ギリシャ文字、演算子、行列環境、矢印など、一般的な数式表現は広くサポートされている。