> ## Content Index > Fetch the complete content index at: https://www.sakashita.page/llms.txt > Use this file to discover other available public pages before exploring further. # Ghost CMSでKaTeXを使って数式を表示する方法 - URL: https://www.sakashita.page/how-to-render-math-equations-in-ghost-cms-with-katex/ - Published: 2026-02-23T21:00:45.000Z - Updated: 2026-02-23T21:00:45.000Z - Author: Sakashita Yasunobu - Tags: 技術 Ghost CMSには数式レンダリング機能が組み込まれていないため、外部ライブラリを導入する必要がある。本記事では、Khan Academyが開発した軽量な数式レンダリングライブラリであるKaTeXをGhostに導入する手順を解説する。 ## KaTeXの読み込み GhostのCode Injection機能を使い、サイト全体のヘッダーにKaTeXのCSSとJavaScriptを追加する。 **Settings > Code injection > Site Header** に以下のコードを貼り付ける。 ```html ``` これはKaTeX公式ドキュメントの[Starter Template](https://katex.org/docs/browser.html)に掲載されているコードである。3つの要素で構成されている。 - **katex.min.css** : 数式の表示スタイルを定義するスタイルシート - **katex.min.js** : KaTeX本体。`defer`属性により、HTMLのパース完了後に実行される - **auto-render.min.js** : ページ内のテキストから数式デリミタを検出し、自動的にレンダリングするKaTeXの拡張機能。読み込み完了時に`renderMathInElement(document.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](https://katex.org/docs/supported.html)ページにまとめられている。ギリシャ文字、演算子、行列環境、矢印など、一般的な数式表現は広くサポートされている。