How to use CodeBlock component in custom MDX loader?

[phuctm97]

Hi everyone, I'm writing a plugin that allows importing MDX documents as JSX components, everything works except that code block seems not being used, here is my webpack config:

 configureWebpack(config, isServer, utils) {
    const { getCacheLoader, getBabelLoader } = utils;
    return {
      module: {
        rules: [
          {
            test: /\.mdx$/,
            include: [path.resolve(context.siteDir, options.rootDir)],
            use: [
              getCacheLoader(isServer),
              getBabelLoader(isServer),
              require.resolve("@docusaurus/mdx-loader"),
            ],
          },
        ],
      },
    };
  },

I tried to look at docusaurus code but didn't find anywhere that handles the logic to use CodeBlock and prism.

Thank you 🙏🏻

[slorber]

The @theme/CodeBlock component is provided by the classic theme and we have the MDXProvider that tells MDX to use it for code blocks instead of the regular HTML <code> element.

You probably don't apply the MDX provider in your code

<MDXProvider components={MDXComponents}>{children}</MDXProvider>

[phuctm97]

Thank you @slorber! Works perfectly