highlight.jsからbrightに移行してみた

このサイトのコードブロックの装飾で利用していた「highlight.js」から「bright」に移行してみました。

経緯

次の理由から「highlight.js」からの移行することにしました。

• 行数やファイル名を入れるのにも外側から頑張る必要があり、カスタマイズに一苦労
• 恐らく利用方法の問題だが、チャンクファイルサイズが910.3 KBもあった
• highlight.jsでも出来そうだが、RSC内でhighlightしたReactNodeを生成したかった
• 個人的にはドキュメントがわかりづらかった

brightの採用

この辺り解決するNext.js用のServer Component無いかなーと思って調べていたら「bright」を見つけました！

行数やファイル名も標準で入れられるし、公式サイトにも記載通り、コードもシンプルで良きでした。

app/page.js
1import { Code } from "bright"
2
3export default function Page() {
4  return (
5    <Code lang="py">print("hello brightness")</Code>
6  )
7}

RSC内でhighlightしたReactNodeを生成するようになったので、First Load JS も改善されました。

まとめ

コードブロックの装飾は意外と面倒だったのですが、「bright」のおかげでだいぶ楽になりました。Next.jsでコードブロックの装飾をする際は「bright」をぜひ試してみてください！