Next.js + microCMSでコードブロックのハイライトを行う

概要

Next.js + microCMSで普通にコードブロックを表示させると、何もハイライトされていない状態になります。
そこで、ライブラリを利用して、ハイライトできるように実装します。

ゴール

Next.js + microCMSで、コードブロックをハイライトできるようにする。

作成物

環境

Next.js v12.3.0

ライブラリのインストール

cheerio と highlight.js とうライブラリを利用して実装します。

$ yarn add highlight.js cheerio
$ yarn add --dev @types/highlightjs @types/cheerio

文章をハイライトする

以下のように、ブログの記事を取得して生成する際の getStaticProps 内の記述を修正します
以下は1例です

// ライブラリのインポート
import cheerio from 'cheerio';
import hljs from 'highlight.js';
import 'highlight.js/styles/hybrid.css';

// 省略

export const getStaticProps: GetStaticProps<Props, Params> = async (context) => {
  const id = context.params?.id;
  const blog = await client.get({ endpoint: 'blog', contentId: id });
  
  // コードハイライトを実装
  const $ = cheerio.load(blog.body);
  $('pre code').each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass('hljs');
  });

  return {
    props: {
      // bodyをコードハイライト実装ずみのものに入れ替え
      blog: { ...blog, body: $.html() },
    },
  };
};

// 省略

これで、コードブロックのハイライトの実装は完了です。
ハイライトのテーマを変更したい場合は、 highlight.js/styles/XXXX を変更してください
- 参考：https://highlightjs.org/static/demo/