how do you configure rehype plugins in integration?

[godmar]

(I'm starting a separate thread on this topic since the other thread is marked answered.)

In thread 1891 is was recommended to import and use the rehype plugin for code highlighting in next.config.mjs like so:

import images from 'remark-images'
import emoji from 'remark-emoji'
import rehypeHighlight from 'rehype-highlight'

const config = {
  // customized webpack config
  webpack: (config, options) => {
    // as per https://github.com/mdx-js/mdx/discussions/1891#discussioncomment-1936148
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        // The default `babel-loader` used by Next:
        options.defaultLoaders.babel,
        {
          loader: "@mdx-js/loader",
          /** @type {import('@mdx-js/loader').Options} */
          options: {
            /* jsxImportSource: …, otherOptions… */
            rehypePlugins: [rehypeHighlight],
            remarkPlugins: [images, emoji],
            providerImportSource: "@mdx-js/react",
          },
        },
      ],
    });     
    return config;
  },
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'tsx', 'ts'],
}

export default config

However, npm run build fails with:

Error: Unknown language: `asm` is not registered

presumably because the rehype highlight plugin is not configured with the asm language.

PS: @wooorm points out the documentation in “Using plugins” section of the “Extending MDX” article which recommends configuration of plugins like so:

// remark and rehype plugins, last w/ options:
await compile(file, {
  remarkPlugins: [remarkMath],
  // A plugin with options:
  rehypePlugins: [[rehypeKatex, {throwOnError: true, strict: true}]]
})

However, this seems specific to stand-alone use.... unless the syntax

   rehypePlugins: [[rehypeKatex, {throwOnError: true, strict: true}]]

works inside a webpack option as well. Does it?

[wooorm]

That syntax works everywhere. You need to change options though, because you are using different plugins.

[godmar]

You're right, this appears to work.
Here is the configuration I used inside next.config.mjs (the parts that are identical to the example shown above are elided):

import x86asm from 'highlight.js/lib/languages/x86asm'

...
            rehypePlugins: [[rehypeHighlight, {
                languages: {x86asm} }
            ]],

This leads to a successful build (taking 50s with ca. 1700 lines of md/mdx code).