Astro MDX example?

[ReinhardtR]

Any working example with Astro MDX?

[davidhu2000]

i managed to get it working davidhu2000/davidhu2000.github.io#52

there are some issues with it

• need to disable syntaxHighlight in astro config
• doesn't work on .mdx files

[tanerijun]

Can confirm that it doesn't work with .mdx files. Not sure if it's just Astro though.

[atomiks]

It works with MDX in Next.js. In the tests, it takes a hAST from the remark parser, then that hAST can be converted into HTML after this plugin has done its work:

https://github.com/atomiks/rehype-pretty-code/blob/17e2856c5abe91eefc0830a8b5f8cab9d13aedb5/test/fixtures.test.js#L20-L24

Is there anything special Astro does with MDX files and Rehype plugins that causes it not to work?

[atomiks]

Seems to be working fine in StackBlitz

[tanerijun]

What's not working is the line highlight. I forked the StackBlitz and tweak it to my use case, and surprisingly it works just fine.

After investigating more, I found that the problem is with the version of @astrojs/mdx. I updated it to version 0.11.4 in this fork StackBlitz and it's no longer working.

As you can see, the first line of the code in the mdx version doesn't get the highlighted class. But if you go to the /normalmd, the highlighted class is still there.

[tanerijun]

Tried it on my project. And yes, the problem is with Astro's mdx integration. Downgrading the version fixed the problem. Thanks

[atomiks]

If you try increasing each version from my StackBlitz, which is the one that stops working? It might be a good idea to file an issue on the Astro repo, or, if there's a workaround we can do for the implementation, that's also possible

[tanerijun]

v0.10.0 is when it starts breaking. Change log

[atomiks]

Found this: withastro/astro#4447

[kevinzunigacuellar]

Hello 😇, this issue has been resolved in [email protected]. Thank you for your patience here is a quick reproduction I made in stackblitz

[atomiks]

Great news. I'll close this then.