Next.js, Contentful, markedの環境における数式表示

投稿日時:5/25/2021, 3:43 PM

はじめに

ブログに数式の表示機能を実装した。そのうち統計学や機械学習の数理も勉強して記事にできればなと漠然と思っているのでその下準備的な意味も込めて。自分が知る限りWeb上での数式表示といえば MathJax だったんだけど、今回実装にあたって改めて調べてみるとmizchiさんが以下のようなことを書かれていた。

mizchiの叫び「MathJaxはやめろ」

ということで、今回は KaTeX を使うことにした。前に記事にしたように、このブログはContentfulにmarkdownの形で記事データを持っており、クライアントでそれをHTMLにマークアップしている。KaTeXはmarkedの renderer の中で使うことになる。

記事作成時の環境について

  • marked: 2.0.5
  • katex: 0.13.11
  • next: 10.2.2 (今回 Next.js は全く関係ないが一応記載)

実装について

参考にした情報

実装は次のリンク先のコメントで共有されている方法にまるまる乗っかっているので、コードは省略する。

この方法に乗っかると以下のような書き味になる。

  • インラインの数式を使いたい時はインラインコードの中で対象を $ で囲う
  • ブロックの数式を使いたい時はコードブロックの中で対象を $$ で囲う

注意点

CSSを読み込んでおく

そもそもの話だけど、KaTeXを使う場合KaTeXのCSSを読み込む必要があるので、以下のスクリプトタグを書いておく。Next.jsなら _document.tsx<Head> 内に書くことになる。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.css"
  integrity="sha384-knaESGLxlQRSHWSJ+ZbTX6/L1bJZWBsBYGb2O+g64XHFuO7CbIj9Pkf1aaVXzIZJ"
  crossOrigin="anonymous"
/>

サニタイズに気をつける

KaTeXで生成したHTMLには <span> タグの中に、classstyle などのAttributeが存在している。このブログではmarkedでマークアップしたHTMLを自前でサニタイズをしているので、設定によってはここで上記のAttributeが落ちる。サニタイズを行っていない場合は全く気にすることはないけど、サニタイズをしていて表示が崩れている場合はサニタイザーの設定を疑うと良い。

結果のサンプル

量子力学では状態の時間発展はSchrödinger方程式に従う。

iℏ∂∂t∣ψ,t⟩=H^∣ψ,t⟩i\hbar\frac{\partial}{\partial t}|\psi, t\rangle=\hat{H}|\psi, t\rangleitψ,t=H^ψ,t

ここで H^\hat{H}H^ はハミルトニアン演算子で全体のエネルギーを表す。スピンのない非相対論的で外力の働いていない粒子の運動を考えると、ハミルトニアンは次式で書ける。

H^=12mp^2\hat{H} = \frac{1}{2m}\hat{\bm{p}}^2H^=2m1p^2

ここで mmm は粒子の質量であり、p^\hat{\bm{p}}p^ は運動量演算子である。位置基底で考えるとSchrödinger方程式は次式になる。

iℏ∂∂tψ(x,t)=−ℏ22m∇2ψ(x,t)i\hbar\frac{\partial}{\partial t}\psi(\bm{x}, t)=-\frac{\hbar^2}{2m}\nabla^2\psi(\bm{x}, t)itψ(x,t)=2m22ψ(x,t)

ψ(x,t)=⟨x∣ψ,t⟩\psi(\bm{x}, t)=\langle\bm{x}|\psi, t\rangleψ(x,t)=xψ,t は位置空間での波動関数である。

ということで、良い感じになった。


share on...