Next.js+TypeScriptのブログで数式をKaTeX形式で書けるようにする

2021-05-29

#TypeScript

#Next.js

前提

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

Next.js : ほぼチュートリアルブログのまま。
Typescript : 4.2.3　(あまり関係ない。)

パッケージ"remark-math"と"KaTeX"の導入

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

$ npm install remark-math
$ npm install remark-html-katex

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

remark-math

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

remark-html-katex

math nodes を remark-htmlに対応したKaTeXに変換します。

KaTeXとは

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

要はwebページに数式が書けるようになる便利ツール。

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

バージョン

インストールしたパッケージライブラリをpackage.jsonで確認したバージョン情報です。

  "remark": "^13.0.0",
  "remark-html": "^12.0.0",
  "remark-html-katex": "^3.0.0",
  "remark-math": "^4.0.0",

remarkやremark-htmlのバージョンも依存関係として重要かもしれないので一応抜粋。

blog.tsを書き換える

それではblogに数式を書けるための加工をしていきます。

blog.tsを以下のように記載します。

モジュールのインポート部分

import remark from 'remark'
import html from 'remark-html'
import math from 'remark-math'
import htmlKatex from 'remark-html-katex'

MarkdownをHTMLにパースする部分

.use(html)の後ろに、上で新しくインポートしたものを繋げていきます。

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

  const processedContent = await remark()
    .use(html)
    .use(math)
    .use(htmlKatex)
    .process(matterResult.content)
  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内に記載しました。

実際に数式を書いてみる

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

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

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

無事に表示されました！

めでたしめでたし。

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

▼ Amazonオススメ商品

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

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