-
Notifications
You must be signed in to change notification settings - Fork 0
Description
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
