Next.js+MDXで任意の言語をハイライトする

デフォルトで対応している言語

以下のプログラミング言語・マークアップ言語などは，デフォルトの状態でシンタックスハイライトが適用されます．

• xml
• bash
• c
• cpp
• csharp
• css
• markdown
• diff
• ruby
• go
• graphql
• ini
• java
• javascript
• json
• kotlin
• less
• lua
• makefile
• perl
• objectivec
• php
• php-template
• plaintext
• python
• python-repl
• r
• rust
• scss
• shell
• sql
• swift
• yaml
• typescript
• vbnet
• wasm

上記にない言語もハイライトしたい場合は，対象の言語のパッケージを自分で追加する必要があります．

ただし，次の設定を行うとデフォルトの言語も含め，設定に記載しなかった言語はすべて無効化されるので注意です．

参考：highlight.js/SUPPORTED_LANGUAGES.md at main · highlightjs/highlight.js · GitHub

設定方法

読み込む各言語のパッケージをインストールし，プラグインのオプションとして設定します．

import apache from 'highlight.js/lib/languages/apache'
import java from 'highlight.js/lib/languages/java'

const languages = (() => {
  return {
    apache,
    java,
  }
})()

export default languages

import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
import { JSX } from 'react'
import rehypeHighlight from 'rehype-highlight'

import languages from '@/app/languages'

const components = {
  h1: ({ children }: { children: string }) => (
    <h1 id={children} className="mt-12 mb-6 font-bold text-2xl text-center">
      {children}
    </h1>
  ),
}

export function CustomMDX(props: JSX.IntrinsicAttributes & MDXRemoteProps) {
  return (
    <MDXRemote
      {...props}
      components={{
        ...components,
        ...(props.components || {}),
      }}
      options={{
        mdxOptions: {
          remarkPlugins: [],
          rehypePlugins: [[rehypeHighlight, { languages }]],
        },
      }}
    />
  )
}

追加パッケージの利用

なかには，外部のパッケージを利用する言語もあります．例として，Solidity と VBA のパッケージを利用する際は以下のようになります．

$ npm i highlightjs-solidity highlightjs-vba

TypeScript 上では定義ファイルが見つからないエラーが出るため，App Router のルートに以下のようにファイルを作成しています．

declare module 'highlightjs-solidity'

import { solidity } from 'highlightjs-solidity'
import vba from 'highlightjs-vba'

const languages = (() => {
  return {
    solidity,
    vba,
  }
})()

export default languages