Skip to content

Syntax highlight in the MDX files #16

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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