技術

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

Sakashita Yasunobu

Sakashita Yasunobu

— 2 min read
Share

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

青空文庫のParser

青空文庫のParser

青空文庫のParserを作ってます。 GitHub - P4suta/aozora: Pure-functional Rust parser for 青空文庫記法 (Aozora Bunko notation): ルビ, 傍点, 縦中横, 外字, 返り点, indent containers, page breaks.Pure-functional Rust parser for 青空文庫記法 (Aozora Bunko notation): ルビ, 傍点, 縦中横, 外字, 返り点, indent containers, page breaks. - P4suta/aozoraGitHubP4suta Rustで作ってますが、配布物はcargoのほかにnpm/pypiでも入手できます Documentation * Playground — try it in

By Sakashita Yasunobu

イケイケなWinスクショアプリを作りました

パソコンのスクショってなんというか、地味というか、撮ってそのままだと何とものっぺりしていますよね。 特にWindowsだとMacっぽい丸っこい感じとかもなく、無骨だなあと。 ということで、それっぽくおしゃれな背景や角丸を付けておしゃれに撮影をしてくれるスクショアプリを作りました。 GitHubで公開しています。 GitHub - P4suta/Snaply: Snaply — a modern, clean-architecture Windows screenshot tool (WinUI 3 / .NET 10)Snaply — a modern, clean-architecture Windows screenshot tool (WinUI 3 / .NET 10) - P4suta/SnaplyGitHubP4suta ウィンドウ・領域選択・スクリーンのキャプチャができます。 タッチスクリーンなどにも対応しているはずです。 撮影をすると、クリップボードにコピーされ、フォルダーへの保存もされます。

By Sakashita Yasunobu
Find My Files

Find My Files

Windowsにおける爆速ファイル検索アプリの定番といえば、Everythingです。 voidtoolswebhost2 その高速さの理由は、NTFSの仕組みをうまく活用していることにあります。Windowsで一般的に使われているNTFSには、ファイル情報を管理するマスターファイルテーブル（MFT）と、ファイルシステムの変更履歴を記録するUSN Journalがあります。Everythingはこれらを利用することで、初回に高速にファイル一覧を構築し、その後はUSN Journalを監視してリアルタイムにインデックスを更新しています。そのため、数百万ファイル規模の環境でも非常に高速な検索を実現しています。 もちろん、単純にファイル名やパスを保持するだけでは、大量のメモリを消費してしまいます。また、数百万件ものファイルから一瞬で目的のものを見つけるためには、メモリ効率の高いデータ構造や高速な検索アルゴリズムなど、さまざまな工夫が必要になります。 このように、Everythingは見た目こそシンプルですが、中身はかなり高度なことをやっているソフトウェアです。 なお、Everyth

By Sakashita Yasunobu