Next.jsでrehype-highlightを使用して、MDXをシンタックスハイライトするための設定

Next.jsでMDXを使っている場合、rehype-highlightを利用すると、このページのコード部分みたいに文字の色を自動で付けてくれるようになる。

色のテーマも自由に選ぶことができるので自分好みのデザインにできる。


npm install rehype-highlight

Next.jsの設定

現在のNext.jsのバージョン（13.4.7）ではmdxRsを有効にしながらプラグインを追加することはできないため、mdxRsをfalseに設定する。

rehype-highlightはESモジュールのため、next.configの拡張子は「js」ではなく「mjs」にする必要がある。

next.config.mjsに次のような設定を追加する。


import rehypeHighlight from 'rehype-highlight';
import withMDX from "@next/mdx";
const nextConfig = {
    // Next.jsの設定
    ...
    pageExtensions: [ 'ts', 'tsx', 'js', 'jsx', 'md', 'mdx' ],
    experimental: {
        mdxRs: false
    }
};
const mdxConfig = {
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: [],
        rehypePlugins: [ rehypeHighlight ]
    }
};
export default withMDX(mdxConfig)(nextConfig);

コンポーネントの設定

MDXを表示するコンポーネントで好きなテーマのcssをimportする。

importのパスは'highlight.js/styles/テーマ名.css'となる。

このとき、テーマ名は小文字にして、空白はハイフンで埋める。

たとえば、当サイトでも使用している「Atom One Dark」テーマを使用する場合は、次のように書く。


import 'highlight.js/styles/atom-one-dark.css';
...
export default function Page(props) {
    ...
    return <MDXContent />
}

MDXファイルでの書き方

これでMDXファイルに言語指定されたコードを書いてみる。（tsとはTypescriptのこと）


```ts
const test = (num: number) => {
    return num + 1 + 'test';
};
```

そうすると次のような感じで、言語ごとに適切な色を付けて表示してくれる。


const test = (num: number) => {
    return num + 1 + 'test';
};