Skip to content

Syntax highlight in the MDX files #16

@n0th1ng-else

Description

@n0th1ng-else

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

Image

Webpack

Image

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
	},
}
Image

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

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions