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

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-docsplugin. For some reason, it is ignored when I switch tostorybook-react-rsbuild.Rsbuild
Webpack
As a workaround, I consider using the PrismJS rehype plugin directly, but it gives a different result
Another option would be to use the mdx-loader directly like this
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-highlighterin order to render the component.Ideally I would love to re-use the code from
@storybook/addon-docsie the code wrapper for syntax highlight. Or have more examples on how to do it the recommended way withrsbuild-plugin-mdx.By syntax highlight, I mean the blocks like this one in the *.mdx files