技術

GhostでもMathJaxでLaTeXのようにきれいな数式を表現する

Photo by Bozhin Karaivanov / Unsplash

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

たまぁに、数式を使う記事を書きたくなるが、GhostではLaTeXで記述したってうまいことしてくれるMarkdownはない。

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

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

お話の前に

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

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

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

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

MathJaxを導入する

Getting Startedからドキュメントを開く。

MathJax

Beautiful math in all browsers.

MathJaxMathJax Consortium

Web IntegrationからStart Nowボタンをクリックすると導入の手順を教えてくれる。

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

<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に頼むなりして使うといいだろう。

<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>