> ## 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でもMathJaxでLaTeXのようにきれいな数式を表現する
- URL: https://www.sakashita.page/how-to-use-mathjax-with-ghost-for-latex-math/
- Published: 2025-08-13T17:10:48.000Z
- Updated: 2026-02-25T13:34:48.000Z
- Author: Sakashita Yasunobu
- Tags: 技術

本ブログではCMSにGhostを使っている。

[たまぁに、数式を使う記事を書きたくなる](https://www.sakashita.page/streamcam-hidden-potential-camera-analysis/)が、GhostではLaTeXで記述したってうまいことしてくれるMarkdownはない。

どうやらウェブサイトでLaTeXのような気レインは数式を表示するのにはMathJaxというJavaScriptによる描画エンジンを使えばいいらしい。

導入が無茶苦茶簡単だったわりに、いざ使うときにつまずいたのはここだけの話。

## お話の前に

Ghostではすべてのページにコードを挿入する機能がDashboardにある。

今回はその機能を**使わない**！

数式を使う記事なんて限られているので、使う記事にだけスニペットを挿入して運用していく方向性でいく。

「いやいや俺の書く記事に数式が出てこないものなんてない！LaTeXで数式を書きまくる！」って人はDashboardのCode Injectionに以下のスニペットを突っ込めばいい。

## MathJaxを導入する

[Getting Started](https://www.mathjax.org/#docs)からドキュメントを開く。

[MathJaxBeautiful math in all browsers.![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-47.ico)MathJaxMathJax Consortium![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/mj-logo.svg)](https://www.mathjax.org/#gettingstarted)

Web Integrationから[Start Now](https://www.mathjax.org/#gettingstarted)ボタンをクリックすると導入の手順を教えてくれる。

現時点ではMathJax version 4が2024年にでた最新版だそう。セキュリティとかそういうのを重視てくれた良い感じのバージョンっぽいので、MathJax version 4を使います。

```html
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

```

書きたい記事のPost settingsからCode Injectionを開き、Headerにコードをペタッと貼り付ければ「MathJaxのエンジン」は導入できる。

## 設定を書き込む

LaTeXに慣れている人なら気づいたと思うが、設定もお忘れなくということだ。具体的には、$がよくつかわれるものだからLaTeXの文脈で使われているかどうか判断できないからデフォでインライン数式が無効化されてる。

とりあえず私が以前使ったテンプレートを共有するが、自分なりにカスタマイズをAIに頼むなりして使うといいだろう。

```html
<script>
window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    // TeX エンジンの完全初期化
    packages: {'[+]': ['base', 'newcommand', 'configmacros']},
    processEscapes: true,
    processEnvironments: true
  },
  startup: {
    typeset: true  // 初期組版を有効化
  }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

```

## 使い方

ディスプレイ数式は$$数式$$と書けばOKで、インライン数式は$数式$と書けばいい。

Previewで数式を確認できますよ。

入力中は脳内でLaTeX数式を書き上げる必要がありますが、そんなものはお手の物ですよね？

どんな感じの記事になるかを確認したければ僕の記事を見てどーぞ。

[LogicoolのStreamCamがいいなって話LogicoolのWebカメラの一つ、StreamCamをコロナによるオンラインミーティング以降からずっと使ってきている。結局当時はカメラオフの場面が多く、さほど使うことがなかったが、大学生となりカメラをオンにしたミーティングに参加する機会が多くなった。 StreamCamStreamCamを購入。1080p 60 FPS、高性能オートフォーカスと露出、縦方向ビデオ / ポートレート方向、汎用マウント、USB-C、デュアルマイクなどが特徴ですLogitech きっかけは使っているラップトップのちょっとした不具合（キーボードバックライトが点灯しなくなった）を修理する際、メーカーのミスで画面を割ってしまい、ディスプレイの交換修理になった。出張修理ということで、メーカー委託の業者が修理してくれたのだが、ディスプレイ交換の際、内臓Webカメラを指でべったり触ってしまったらしく、カメラの保護フィルムの粘着層に指紋がついてしまったようで、使い物にならないほど白ぼけてしまった。 とはいえ別にオンライン授業で高画質な映像を届ける機会などないし、複数回にわたる修理で呆れていたので、特に何もせずその![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/logo-1.png)SakashitaのブログYasunobu![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/photo-1623949556303-b0d17d198863)](https://www.sakashita.page/streamcam-hidden-potential-camera-analysis/)

MathJaxを使って数式を書いたよ