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

手順

必要ライブラリをインストールします。

npm install cheerio highlight.js

ここからはシンタックスハイライトをさせたいページのjsファイルを編集します。

ライブラリをimportします。

import { load } from 'cheerio';  // cheerioの直接参照は非推奨だったため、loadをimport
import hljs from 'highlight.js';

ビルド時に呼ばれるgetStaticPropsに処理を追加します。

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

  // ---- 追加する処理 ここから ----
  const $ = load(data.content);  // data.contentはmicroCMSから返されるリッチエディタ部
  $('pre code').each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass('hljs');
  });
  data.content = $.html();
  // ---- 追加する処理 ここまで ----

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

highlight.jsのデモサイトから好きなテーマを選びimportしてください。

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

以上でソースコードがハイライトされていれば終了です。

〔 2023/01/19追記 〕上の方法はどのプログラミング言語のシンタックスハイライトをするかはhighlight.jsが自動判定していますが、手動で言語を指定したい場合はこちらの「microCMS｜プログラミング言語を指定してシンタックスハイライトを行う方法」をご参照ください。