43. 【GitHub Pages】🧮 GitHub Pages（Jekyll）で数式（MathJax）を表示する方法

topics: [“GitHubPages”, “Jekyll”, “MathJax”, “LaTeX”, “Qiita”]

Qiita では、数式（LaTeX）をそのまま Markdown に書くだけで
きれいにレンダリングされます。

一方で、GitHub Pages（Jekyll）は
標準状態では数式を描画しません。

この記事では、

Qiita と同じ書き方（$...$, $$...$$）を維持したまま
GitHub Pages 上で数式を表示する方法

を、最小構成・コピペ前提で整理します。

🎯 目的

以下を満たす構成を作ります。

🧩 前提構成

⚙️ _config.yml の設定

まず、Jekyll 側で MathJax を使う前提を設定します。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge
  math_engine: mathjax

📌 ポイント

🧠 head.html に MathJax を追加

次に、_includes/head.html に MathJax を読み込みます。

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    }
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

📌 ポイント

✏️ Markdown での数式記述例

インライン数式

オームの法則は次式で表されます。

$V = IR$

（電圧–電流、すなわち V–I 特性の基本式です）

ブロック数式

2次遅れ系の代表的な伝達関数は次のとおりです。

\[G(s) = \frac{\omega_n^2}{s^2 + 2\zeta\omega_n s + \omega_n^2}\]

Qiita と同じ感覚で、そのまま書けます。

🔍 実際の表示デモ

この構成を使って 実際に数式が描画されているページはこちらです。

📌
「本当に動いているか」を確認できる実デモを
記事内に置くと、再現性が一気に上がります。

⚠️ 注意点（よくあるハマりどころ）

📝 まとめ