When using MdxComponents HTMLPreElement block strips classnames to only include 1 string.

[konyogony]

Lets say I have this pre block in my .mdx file:

``ts test
const helloWorld = () => console.log("Hello world!");
``

Ignore that there are only 2 backticks, I have just placed them to escape markdown being used in github.

And then I decide to use custom MdxComponents when rendering, so the code should go something like this:

export const mdxComponents = {
    pre: ({ children, ...props }: React.HTMLAttributes<HTMLPreElement>) => {
        console.log(children)

        return (
            ... do stuff
        );
    },

I will be getting this output:

{
  '$$typeof': Symbol(react.element),
  type: [Function: code],
  key: null,
  ref: null,
  props: {
    className: 'language-ts',
    children: "const helloWorld = () => console.log('Hello world!');\n"
  },
  _owner: null,
  _store: {}
}

And there you can see that the word test I placed with a space after the language has been stripped and not accessible. Been breaking my head on this for a long time and still figured out no solution or what my problem is.

For context I use Next15 with mdx setup correctly and I am directly viewing page.mdx files.

[ChristianMurphy]

Welcome @konyogony! 👋
Correct code meta does not do anything in mdx by default.
The can be configured by plugins, it sounds specifically like you want something along the lines of https://github.com/remcohaszing/rehype-mdx-code-props

[konyogony]

Oh, didn't know that and also couldn't find the info about it. Will test tomorrow as soon as possible and close this discussion. Thanks for the help!

[wooorm]

See also https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field where that plugin is mentioned on the site.

And, you can use code in code:

````markdown
```js
console.log(1)
```
````