はじめに

おはようございます。こんにちは。こんばんは。
Watatakuです。

今回の記事はこのブログにシンタックスハイライトをつけた話です。
では、やっていきます。

必要モジュールをインストールする

まずは下記コマンドで必要なモジュールをインストールします。

$ npm install highlight.js cheerio

typescriptをお使いの方は下記も一緒に。

$ npm install --save @types/highlightjs @types/cheerio

実装する

下記コードをgetStaticProps に追加してください。

import cheerio from "cheerio";
import hljs from "highlight.js";
import type {
  InferGetStaticPropsType,
  GetStaticPropsContext,
  NextPage,
} from "next";

type Props = InferGetStaticPropsType<typeof getStaticProps>;

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

  const $ = cheerio.load(data.body); // data.body はブログの本文が入っていると思ってください

// ------------------------------------------ 追加 ------------------------------------------
  $("pre code").each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass("hljs");
  });
// ------------------------------------------ 追加 ------------------------------------------
  return {
    props: {
      highlightedBody: $.html(),
    },
  };
};

const Detail: NextPage<Props> = ({ highlightedBody }) => {
    return (
        <div dangerouslySetInnerHTML={{ __html: highlightedBody }} />
    )
};
export default Detail;
 

なお、このページに、

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

を追加して、見た目を修正しています。
これで、このブログのようにソースコードのシンタックスハイライトが実現できました。

最後に

技術ブログを作るにあたり、シンタックスハイライトをつけたい方のご参考に
なればと思います。

• 参考
• 参考２