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

microCMSで取得した記事情報のコード部分にシンタックスハイライトを追加する処理です。
※シンタックスハイライト...プログラムのソースコードを、視覚的に分かりやすくするために行われる、色分けや文字の太字化などの装飾のこと

npmインストール

npm i cheerio
npm i highlight.js

[id].tsxの記述

import { load } from 'cheerio';
import hljs from 'highlight.js';
import 'highlight.js/styles/hybrid.css';

export default function BlogId({ blog }: any) {
    return (
    〜省略〜
        <div
            className="mt-5"
            dangerouslySetInnerHTML={{
                __html: `${blog.body}`,
            }}
        />
    〜省略〜
  );
}

export const getStaticProps = async (context: { params: { id: string } }) => {
    const id = context.params.id;
    const data = await client.get({ endpoint: 'blog', contentId: id });

    // シンタックスハイライト
    const $ = load(data.body);
    $('pre code').each((_, elm) => {
        const result = hljs.highlightAuto($(elm).text());
        $(elm).html(result.value);
        $(elm).addClass('hljs');
    });
    data.body = $.html();

    return {
        props: {
            blog: data,
        },
    };
};

補足

以下の部分はデモサイトから好きな色付けを探すことができます。

import 'highlight.js/styles/hybrid.css';

上記dataの「body」としている部分はmicroCMSでリッチエディタ部分として設定した名前を設定します。

参考リンク

microCMS + Next.jsでシンタックスハイライトを行う