Custom props of code blocks

• mdx-bundler version: 7.0.0
• node version: 14.18.1
• npm version: 6.14.15

Relevant code or config

Here’s how I handle an MDX file with mdx-bundler:

import { bundleMdx } from 'mdx-bundler'

const content = file.readFileSync(filePath, 'utf8')
const { code } = await bundleMdx(content)

Here’s how I define the React component:

import { getMDXComponent } from 'mdx-bundler/client'

export function getMdxComponent(code: string) {
  const Component = getMDXComponent(code)

  return function MdxComponent({ components, ...rest }: MDXContentProps) {
    return (
      <Component
        components={{
          code(props) {
            console.log(props) // <--
            return <code {...props} />
          }
        }}
        {...rest}
      />
    )
  }
}

What you did:

Here’s my MDX file that’s not parsing correctly:

```js a=1 b=2
function foo() {}
\```

I wish for the a and b props given to the code block to be exposed under props when writing custom components object for the getMDXComponent.

What happened:

The props of the code component do not have the a and b keys. I’ve noticed that only className and children props are passed to the code component (may be that only the HTML props are supported).

Suggested solution:

I believe the issue lies somewhere in MDX parsing, which is likely to be done by a different library (xdm). Still, this is where it’s surfaced for me, I think it’s nice to keep track of it in this repository for posterity (we may create an issue in xdm if necessary).

[allangrds]

Thanks a lot @PsyGik. I’m using ''' only here, to create this comments, but as you can see here(https://user-images.githubusercontent.com/4103305/184169786-1283655e-7b70-434d-9bc3-df93a9d84c4b.png), I’m using backticks correctly. Thanks a lot for you pacience.

Checking you code and mine, I’ve noticed that ‘remark-prismjs’ was removing meta, so I’ve changed to rehypePrism and it’s all good now 😃

[PsyGik]

Thank you for the code samples @allangrds. Couple of things to note here:

• It seems like in your markdown, you are using ''' (quotes) instead of ``` (backticks) to render a code block.
• I’d ideally keep prism syntax highlighting plugin as the last one in the list, as I’ve observed it to cause problems with other plugins. (NOTE: that I use a custom version of prism syntax highlighting, and this point may or may not be true depending on you use-case. But it never hurts to try 🤷🏽 )

I’ve created a bare-bones sample repo here. https://github.com/PsyGik/mdx-bundler-nextjs/tree/main.

Follow the usual steps, npm install && npm run dev and navigate to localhost:3000/hello. In your terminal, you should see the logs which prints the meta values.

❯ npm run dev

> dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 382 ms (178 modules)
wait  - compiling...
event - compiled client and server successfully in 91 ms (178 modules)
wait  - compiling /hello (client and server)...
event - compiled client and server successfully in 159 ms (193 modules)
node.data.meta title='code.js'
node.data.meta filename="awesome.js"