microCMS｜新リッチエディタでシンタックスハイライトとファイル名表示をする方法

import { client } from "../../libs/client";
import { Blog } from "../../types/blog";

// ==================== 追加する処理① ここから ====================

import hljs, { HighlightResult } from "highlight.js";
import { load } from "cheerio";

// ==================== 追加する処理① ここまで ====================

type Props = {
  blog: Blog;
};

export default function BlogId({ blog }: Props) {
  return (
    <main>
      <div
        dangerouslySetInnerHTML={{
          __html: `${blog.content}`,
        }}
      />
    </main>
  );
}

// 静的生成のためのパスを指定
export const getStaticPaths = async () => {
  const data = await client.get({ endpoint: "blogs" });

  const paths = data.contents.map((content: any) => `/blog/${content.id}`);
  return { paths, fallback: false };
};

// データをテンプレートに受け渡す部分の処理
export const getStaticProps = async (context: any) => {
  const id = context.params.id;
  const data = await client.get({ endpoint: "blogs", contentId: id });


  // ==================== 追加する処理② ここから ====================

  // APIから取得したリッチエディタのHTMLからcheerioオブジェクトを生成
  const $ = load(data.content);

  // コードブロックのファイル名が入力されている場合の処理
  $("div[data-filename]").each((_, elm) => {
    // data-filename属性の値を持つspanを
    // <div data-filename="{入力したファイル名}">の最初の子要素として追加
    $(elm).prepend(`<span>${$(elm).attr("data-filename")}</span>`);
  });

  // コードブロックのシンタックスハイライトを行う
  $("pre code").each((_, elm) => {
    const language = $(elm).attr("class") || "";
    let result: HighlightResult;

    if (language == "") {
      // 言語が入力なしの場合、自動判定
      result = hljs.highlightAuto($(elm).text());
    } else {
      // 言語が入力ありの場合、入力された言語で判定
      result = hljs.highlight($(elm).text(), {
        language: language.replace("language-", ""),
      });
    }
    $(elm).html(result.value);
    $(elm).addClass("hljs");
  });

  // 編集したHTMLを再設定
  data.content = $.html();
  
  // ==================== 追加する処理② ここまで ====================


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

/* コードブロック */
pre {
  overflow-x: auto;
  margin-top: 16px;
  margin-bottom: 0px;
  border-radius: 5px;
}

/* コードブロック(ファイル名が入力ありの場合) */
div[data-filename] {
  margin-top: 16px;
}

div[data-filename] > span {
  display: inline-block;
  background-color: #dfdfdf;
  text-align: center;
  padding: 3px 15px;
  border-radius: 5px 5px 0px 0px;
}

div[data-filename] > pre {
  margin-top: 0px;
  border-top-left-radius: 0px;
}