Ryota Kondo

Ryota Kondo

2022/11/29

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

microCMSのブログでNuxt.jsを使用した実装例はありましたが、Next.jsの例はなかったので自分で調べて試してみた結果を説明します。

結果として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|プログラミング言語を指定してシンタックスハイライトを行う方法」をご参照ください。

関連タグの記事

Ryota Kondo
Ryota Kondo

システムエンジニア・プログラマー|このブログサイトの運営もしており、思いついたことをまとめて記事を書いています💡