GhostでもMathJaxでLaTeXのようにきれいな数式を表現する
本ブログではCMSにGhostを使っている。
たまぁに、数式を使う記事を書きたくなるが、GhostではLaTeXで記述したってうまいことしてくれるMarkdownはない。
どうやらウェブサイトでLaTeXのような気レインは数式を表示するのにはMathJaxというJavaScriptによる描画エンジンを使えばいいらしい。
導入が無茶苦茶簡単だったわりに、いざ使うときにつまずいたのはここだけの話。
お話の前に
Ghostではすべてのページにコードを挿入する機能がDashboardにある。
今回はその機能を使わない！
数式を使う記事なんて限られているので、使う記事にだけスニペットを挿入して運用していく方向性でいく。
「いやいや俺の書く記事に数式が出てこないものなんてない！LaTeXで数式を書きまくる！」って人はDashboardのCode Injectionに以下のスニペットを突っ込めばいい。
MathJaxを導入する
Getting Startedからドキュメントを開く。
MathJax 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>
使い方
ディスプレイ数式は$$数式$$と書けばOKで、インライン数式は$数式$と書けばいい。
Previewで数式を確認できますよ。
入力中は脳内でLaTeX数式を書き上げる必要がありますが、そんなものはお手の物ですよね？
どんな感じの記事になるかを確認したければ僕の記事を見てどーぞ。
Yasunobu
MathJaxを使って数式を書いたよ