実装イメージ

コードにスタイルがないので味気ない

↓↓
ハイライトさせる

microCMSから取得できるデータから、
cheerioを使用してコード部分の文字列を取り出し、
highlight.jsでスタイルをつけ表示させるイメージです。

使用ライブラリ

cheerio
highlight.js

実装ステップ

ライブラリの導入

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

実装

①関数を作成
引数にブログのコンテンツをセットすることで、
コードに色付きのクラスを当てて返却してくれる関数(renderHighlightedBody)を作ります。

src/libs/render-toc.js↓

import * as cheerio from "cheerio";
import hljs from "highlight.js";

export const renderHighlightedBody = (body) => {
  const $ = cheerio.load(body);

  $("pre code").each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text())
    $(elm).html(result.value)
    $(elm).addClass("hljs")
  })
  return $.html();
};

②関数を実行して変数に格納・出力
src/page/blog/[id].tsx↓

type Props = Blog & MicroCMSContentId & MicroCMSDate;

const Post: NextPage<Props> = (props) => {
  //①で作成した関数を使用して、ハイライトされたコードを変数に格納
  const highlightedBody = renderHighlightedBody(props.content);

  return (
    <>
        <article>
          <h1>{props.title}</h1>
          <div
            className={styles.blog_post}
            dangerouslySetInnerHTML={{ __html: highlightedBody }}
          />
        </article>
    </>
  );
};

export const getStaticPaths: GetStaticPaths<{ id: string }> = async () => {
  const data = await client.getList<Blog>({ endpoint: "blog" });
  const paths = data.contents.map((content) => `/blog/${content.id}`);

  return { fallback: "blocking", paths };
};

export const getStaticProps: GetStaticProps<Props, { id: string }> = async (
  context
) => {
  if (!context.params) {
    return {
      notFound: true,
    };
  }

  const data = await client.getListDetail<Blog>({
    contentId: context.params.id,
    endpoint: "blog",
  });

  return {
    props: data,
    revalidate: 10,
  };
};

export default Post;

参考サイト

next.js+microcmsでシンタックスハイライトの導入

以上です！