【microCMS×NEXT.js】リッチエディタをもっとリッチにカスタマイズする方法（初心者向け）

こんにちは。ざまです。
今回は、microCMSのリッチエディタにシンタックスハイライトとHTMLを埋め込みできるように実装したので
それを記事に書きます。

こんな感じの
シンタックスハイライト

<div>シンタックスハイライトです。</div>

HTML

ほとんどの方は、記事に書くほどでもないかもですが、
プログラミング歴半年のざまは、かなり苦戦しました^^;

なので、基本的には初心者向けの記事です。

完成コード（実装部分）

  [id].js

// データをテンプレートに受け渡す部分の処理を記述します
export const getStaticProps = async (context) => {
  const id = context.params.id;
  const data = await client.get({endpoint:"blog",contentId:id});
  
  // ショートコードをリッチエディタに埋め込む為の関数
 const replaceBody = ({ body, shortCodes,}) => {

  // ショートコードを作るための式？
  const shortCodesMap = shortCodes?.reduce((res, { code,body}) => ({ ...res, [code]:body}),{} ) ?? {}

  //シンタックスハイライト式
  const $ = cheerio.load(body);
  $('code').each((_, elm) => {
   const result = hljs.highlightAuto($(elm).text());
   $(elm).html(result.value);
   $(elm).addClass('hljs');
  });
  
  // シンタックスハイライトしたbody($.html)の中から、識別コードを正規表現でマッチさせ、元に返す？
  return $.html().replace(/undefined/g, (...[, key]) => shortCodesMap[key])

}

  return {
    props:{
        // blog:data,
        data:{       
          ...data,
          body:replaceBody(data),　　　　
        } 
      },
      revalidate: 3600
      
  }

}

export default function BlogId({data}) {
   return (
        <BlogItem blog={data}  />
      )
 }

参考にした記事

HTML実装
https://zenn.dev/aiji42/articles/46ac448d95e847

シンタックスハイライト実装
https://qiita.com/cawauchi/items/ff6489b17800c5676908

上記サイトの方が詳しく書いてあります。

基本的にmicroCMSを導入したら大半が実装するであろう、こちらの記事のコードがベースになっています。
https://blog.microcms.io/microcms-next-jamstack-blog


初心者の方の参考になれば、幸いです。