マークダウン記事にテーブルとコードハイライトを追加
このブログはマークダウンで記事を書いて表示していますが、テーブルやコードブロックが正しく表示されない問題がありました。react-markdown がデフォルトでGFM（GitHub Flavored Markdown）に対応していないことが原因のため、以下の2つのパッケージを追加してプラグインとして設定しました。
追加したパッケージ
npm install remark-gfm rehype-highlight
remark-gfm
GFMに対応するプラグイン。以下が使えるようになる。
| 機能 | 記法 |
|---|---|
| テーブル | | A | B | |
| 打ち消し線 | ~~テキスト~~ |
| タスクリスト | - [ ] TODO |
| URLの自動リンク化 | https://... |
rehype-highlight
コードブロックにシンタックスハイライト（色付け）を適用するプラグイン。
変更内容
app/posts/[slug]/page.tsx
import remarkGfm from "remark-gfm"
import rehypeHighlight from "rehype-highlight"
// ...
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]}
>
{post.content}
</ReactMarkdown>
app/globals.css
@import 'highlight.js/styles/github-dark.css';
まとめ
react-markdown 単体ではテーブルなどのGFM記法に対応しておらず、
技術ブログなどでマークダウンを表示する場合は、最初からこの2つのプラグインを入れておくと良さそうです。
ちなみにこんな感じになりました。ちょっと感動しました。
自動リンク化
テーブルとシンタックスハイライト
余談
↓ 前の記事で書いたAIのGITコーチング良い感じです。Gitマスター目指して頑張ります。
