Syntax highlight in the MDX files

Thank you for working on the mdx implementation for the RSBuild. very useful!

I am now migrating Storybook 8 from webpack to RSPack, and I have made good progress so far. Except for the MDX syntax highlight.
As I understand it, Storybook uses react-syntax-highlighter under the hood in their @storybook/addon-docs plugin. For some reason, it is ignored when I switch to storybook-react-rsbuild.

Rsbuild

Webpack

As a workaround, I consider using the PrismJS rehype plugin directly, but it gives a different result

import type {RsbuildConfig} from '@rsbuild/core'
import {pluginReact} from '@rsbuild/plugin-react'
import {pluginMdx} from '@rsbuild/plugin-mdx'
import type {StorybookConfig} from 'storybook-react-rsbuild'
import rehypePrism from '@mapbox/rehype-prism'

const config: StorybookConfig = {
	rsbuildFinal: (cfg: RsbuildConfig): RsbuildConfig => {
		cfg.plugins = [
			pluginReact(),
			pluginMdx({
				mdxLoaderOptions: {
					rehypePlugins: [rehypePrism],
				},
			}),
		]

		return cfg
	},
}

Another option would be to use the mdx-loader directly like this

	{
		test: /\.mdx$/,
		loader: '@storybook/addon-docs/mdx-loader',
		options: {
			rehypePlugins: [rehypePrism],
		}
	},

It is difficult to follow the code in the Storybook, but I think they post-process the parsed MDX file here.
And they use react-syntax-highlighter in order to render the component.

Ideally I would love to re-use the code from @storybook/addon-docs ie the code wrapper for syntax highlight. Or have more examples on how to do it the recommended way with rsbuild-plugin-mdx.

By syntax highlight, I mean the blocks like this one in the *.mdx files

Start by tracing pluginMdx and its mdxLoaderOptions in the rsbuild-plugin-mdx integration used by storybook-react-rsbuild. Compare that behavior with Storybook's linked components.tsx and syntaxhighlighter.tsx, then verify the result with an MDX code block. Done means syntax highlighting works under Rsbuild or the recommended configuration is documented.