【2022最新】Next.js+TypeScriptのブログで数式を書く方法【KaTeX/LaTeX/Markdown】

2022-05-03

#TypeScript

#Next.js

前提

本ブログは以下の環境で作成しています。

TypeScript : 4.6.2
Next : 12.1.6

ブログはこちらの記事にあるように、ほぼNext.jsのテンプレートのままです。

KaTeXとは

KaTeX(https://katex.org/)はウェブブラウザで数学表記を表示するクロスブラウザJavaScriptライブラリです。(Wikipediaから引用。)

要はwebページに数式が書けるようになる便利ツール。論文とか書いたことのある人にとってはLaTeXの使い勝手をイメージしていただければわかりやすいと思います。

KaTeXの書き方はこちらが参考になります。 https://manabitimes.jp/katex

関連パッケージのインストール unified, remark-math, rehype-katex

以下のパッケージをインストールします。

$ npm install unified
$ npm install remark-parse
$ npm install remark-rehype
$ npm install remark-math
$ npm install rehype-katex
$ npm install rehype-stringify

以前の記事ではremark-html,remark,remark-html-katexを使っていましたが、今回はrehype-katexを使う方法に変更しています。

それぞれのパッケージの役割は以下の通りです。

unified, remark-parse

マークダウンをパースするのに必要。MarkdownのASTであるmdastに変換する。

ASTは抽象構文木のことで、Unifiedはこのようなパースに役立つ構造を定義しています。

remark-rehype

HTMLにパースするのに必要。前述のmdastを、HTMLのASTであるhastに変換する。

rehype-stringify

hastをHTMLに変換する。

remark-math

マークダウン内の$ を inlineMath に、$$ をmath nodesにパースします。

rehype-katex

math nodes を KaTeXに変換します。

インストールしたパッケージのバージョン

インストールしたパッケージライブラリをpackage.jsonで確認したバージョン情報です。動作確認済みということで、参考に記載しておきます。

"rehype-katex": "^6.0.2",
"remark-math": "^4.0.0",
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"unified": "^10.1.2",
"rehype-stringify": "^9.0.3",

Next.jsでKaTeXを使って数式を書く方法

それでは数式を書けるようにしていきます。

ここではpost.tsというファイル内で、Markdownのパースを行う処理を書きます。

以下のように記載します。

パッケージのインポート部分

import {unified} from 'unified'
import remarkRehype from 'remark-rehype'
import remarkParse from 'remark-parse'
import rehypeStringify from 'rehype-stringify'

import math from 'remark-math'
import rehypeKatex from 'rehype-katex'

unifiedはexport defaultされていないので、{}をつけて呼び出すことに注意しましょう。

MarkdownをKaTeX HTMLにパースする部分

unified関数を呼び出し、.use()メソッドで繋げて行きます。

export async function getPostData(id: string) {
  ...

  const processedContent = await unified()
    .use(remarkParse)
    .use(math)
    .use(remarkRehype)
    .use(rehypeStringify)
    .use(rehypeKatex)
    .process(matterResult.content) // Markdownコンテンツを入れて実行
  const contentHtml = processedContent.toString()
  return {
    id,
    
    ...

    })
  }
}

これで、markdownの中に書いた$マークや$$マークで囲った部分が、mathコンポーネント<div class="math math-display">に置換されるようになりました。

katex.cssをインポートする

上でmathコンポーネントができたので、これにスタイルを適用するためにCSSをインポートします。

https://github.com/remarkjs/remark-mathに書いてあるとおり、

Note: you should also use katex.css somewhere on the page to style math properly:

ということで、読み込みます。crossoriginはcrossOriginとキャメルケースに修正。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossOrigin="anonymous" />

上記をlayout.tsxのHead内に記載しました。

ローカルにフォントとCSSをインストールして使いたい場合は以下からダウンロードできます。

KaTeX GitHub Release : https://github.com/KaTeX/KaTeX/releases

実際にMarkDownに数式を書いてみる

それでは実際に書いてみましょう！

記事のマークダウンに書いた内容

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

↑remark-mathのReadMeにかいてあるやつ。

結果

Lift( $L$ ) can be determined by Lift Coefficient ( $C_L$ ) like the following equation.

L = \frac{1}{2} \rho v^2 S C_L

無事に表示されました！

めでたしめでたし。

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

【オススメ】未経験からプログラマーへ転職できる【GEEK JOBキャンプ】

▼ Amazonオススメ商品

ディスプレイライトデスクライト BenQ ScreenBar モニター掛け式

スマートLEDフロアライト間接照明 Alexa/Google Home対応