Next.js × microCMSでシンタックスハイライトをつける

記事のソースコードにシンタックスハイライトで、コードに色付けして見やすくします。

ライブラリ追加

HTMLをパースする jsdom とハイライトする highlight.js を追加します。

yarn add jsdom @types/jsdom highlight.js

ハイライトのためのclass追加

jsdom と highlight.js を使って、コードに色付けするためにclassを追加します。
以下記事詳細ページにて getStaticProps の必要な部分だけ書き出したコードです。

import hljs from 'highlight.js'
import { JSDOM } from 'jsdom'

export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
    })


    const dom = new JSDOM(data.content)

    dom.window.document.querySelectorAll('pre code').forEach((element) => {
      element.innerHTML = hljs.highlightAuto(element.textContent ?? '').value
      element.classList.add('hljs')
    })

    const body = dom.window.document.body.innerHTML

    const category = await client.get({
      endpoint: 'blog-category',
    })

    return {
      props: {
        blog: data,
        body: body,
        category: category.contents,
        currentCategory: toStringId(params.category),
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}

Highlight.jsのテーマを読み込む

テーマが用意されてるので、好みのスタイルを読み込みます。
デモページがあるので、好きなテーマを探しましょう。
https://highlightjs.org/static/demo/

このブログでは Stack Overflow Light というテーマを使ってます。
記事詳細のコンポーネントで以下のように読み込めばOKです。

import 'highlight.js/styles/stackoverflow-light.css'

参考サイト

以下の記事にあるGItHubリポジトリを参考にしました。
microCMSブログのNext.js版を作成した