しくみ

Ghost CMSでKaTeXを使って数式を表示する方法

Sakashita Yasunobu

Sakashita Yasunobu

— 2 min read

Ghost CMSには数式レンダリング機能が組み込まれていないため、外部ライブラリを導入する必要がある。本記事では、Khan Academyが開発した軽量な数式レンダリングライブラリであるKaTeXをGhostに導入する手順を解説する。

KaTeXの読み込み

GhostのCode Injection機能を使い、サイト全体のヘッダーにKaTeXのCSSとJavaScriptを追加する。

Settings > Code injection > Site Header に以下のコードを貼り付ける。

<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css>" integrity="sha384-WcoG4HRXMzYzfCgiyfrySxx90XSl2rxY5mnVY5TwtWE6KLrArNKn0T/mOgNL0Mmi" crossorigin="anonymous">

<script defer src="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js>" integrity="sha384-J+9dG2KMoiR9hqcFao0IBLwxt6zpcyN68IgwzsCSkbreXUjmNVRhPFTssqdSGjwQ" crossorigin="anonymous"></script>

<script defer src="<https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js>" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

これはKaTeX公式ドキュメントのStarter Templateに掲載されているコードである。3つの要素で構成されている。

  • katex.min.css : 数式の表示スタイルを定義するスタイルシート
  • katex.min.js : KaTeX本体。defer属性により、HTMLのパース完了後に実行される
  • auto-render.min.js : ページ内のテキストから数式デリミタを検出し、自動的にレンダリングするKaTeXの拡張機能。読み込み完了時にrenderMathInElement(document.body)を呼び出し、<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ページにまとめられている。ギリシャ文字、演算子、行列環境、矢印など、一般的な数式表現は広くサポートされている。

Read more

暇が怖いだけ

今日あなたが「忙しい」と口にした回数を数えてみるといい。三回を超えていたら、それはもう事実の報告ではない。呪文だ。唱え続けることで、自分に存在価値があると確認するための。 忙しさは現代における最も手軽な自己証明になった。忙しくしていれば、少なくとも何かをしていることにはなる。何かをしていれば、生きている意味を問わなくて済む。逆に言えば、暇になった途端に、その問いが戻ってくる。だから人は忙しくする。忙しくあろうとする。忙しいと言いたがる。鎖を愛した動物のように、自分でかけた拘束を手放せない。 ここに一つ、居心地の悪い問いを置いておく。あなたが一日のなかで一番多くの時間を費やしていることは、あなたが一番大切にしていることと一致しているか。一致していないとしたら、その時間は誰のものなのか。 守られない時間 約二千年前、ストア派の哲学者セネカは『人生の短さについて』でこう嘆いた。人は財産や金のことになると吝嗇になるのに、時間を浪費することには驚くほど無頓着だ、と。時間こそ、最も惜しむべきものであるにもかかわらず。 この指摘は二千年経っても古びていない。むしろ悪化している。 財布か

By Sakashita Yasunobu

意味という病

あなたの人生に意味があるかどうか、宇宙は一度も気にしたことがない。 太陽は46億年前から燃えている。地球は回り続けている。そのどこにも、あなたの存在を前提とした設計図はない。もし明日、人類がまるごと消えたとしても、星は瞬き続ける。海は満ちて引く。何も変わらない。 それなのに、人は意味を求める。仕事に意味を、人間関係に意味を、生きていること自体に意味を。朝起きるたびに、意識するにせよしないにせよ、「なぜ」という問いがどこかで回っている。 これは病だと思う。 治す方法があるのかどうかも分からない、厄介な病だ。 観客のいない劇場 一つ、思考実験をしてみる。 もし宇宙のどこにも、人間以外の知的生命体がいなかったとしたら。誰も人類の存在を知らず、誰も観察しておらず、誰も記録していなかったとしたら。人間がこの星の上で営んできたすべてのこと、文明、芸術、戦争、愛、それらに意味はあるだろうか。 直感的には「ある」と言いたくなる。でも、その「ある」の根拠を言語化しようとすると、途端に足元が崩れる。 意味というのは、誰かがそれを認識して初めて成立するものだという立場がある。であれば、宇

By Sakashita Yasunobu

優しい人から壊れる

友人が泣いている。あなたはその隣に座って、背中をさする。言葉が見つからないまま、ただそこにいる。胸が詰まる。相手の苦しみが、自分の胸にも流れ込んでくるような気がする。 それは美しい光景だ、と誰もが言う。 ただ、もう少しだけ先を考えてみてほしい。あなたが感じているその痛みは、本当に相手の痛みだろうか。それとも、相手の痛みに触発された、あなた自身の別の何かだろうか。そして、その区別がつかなくなったとき、壊れるのはどちらだろう。 スポットライトの外は暗い 共感には奇妙な性質がある。近くにあるもの、目に見えるもの、名前と顔があるものに、不釣り合いなほど強く反応する。 イェール大学の心理学者ポール・ブルームは2016年の著書 Against Empathy で、共感をスポットライトに喩えた。照らされた一点だけが鮮やかに浮かび上がり、その外側は真っ暗なままだ。一人の子どもが井戸に落ちれば世界中が涙を流すが、統計の中で消えていく数万の子どもたちには何も感じない。 ブルームの指摘はさらに厄介な方向へ進む。共感はバイアスに満ちている。自分に似た人、魅力的な人、同じ民族や国籍の人に対して、よ

By Sakashita Yasunobu

何も起きなかった日

先月の火曜日に何をしていたか、思い出せるだろうか。 おそらく思い出せない。それは記憶力の問題ではなく、何も起きなかったからだ。何も起きなかった日は記憶に残らない。記憶に残らない日は、振り返ったとき、最初からなかったのと区別がつかない。 人生の大半は、こういう日でできている。 溶けていく曜日 子供の頃の夏休みは果てしなく長かった。35日間が、体感では半年くらいあった。ところが大人になると、半年が体感で35日くらいになる。時間の流れ方が、どこかで反転している。 神経科学者のデイヴィッド・イーグルマンは、この現象を記憶の密度から説明している。脳は新しい経験に遭遇すると、より多くの情報を符号化する。記憶が密であれば、あとから振り返ったとき、その期間は長く感じられる。逆に、毎日が同じパターンの繰り返しなら、脳は記録すべきものをほとんど見つけられない。記憶はスカスカになる。スカスカの記憶を振り返ると、時間はあっという間に過ぎたように感じる。 つまりルーティンは、主観的な人生を縮めている。比喩ではない。知覚の構造として、そうなっている。毎日同じ道を歩き、同じ時間に同じ席に座り、同じもの

By Sakashita Yasunobu