Syntax highlighting only applied in `.md` files, not `.mdx`
DerTimonius opened this issue · comments
Disclaimer: I'm pretty sure this is a skill issue on my part
Description
I'm using the expressive-code package in my Astro blog for some time now. When I first tried to use it, I had to change all my posts from .mdx to .md file because there was no syntax highlighting at all in the mdx file.
The initial reasoning to use mdx instead of md was to render a custom .astro component inside some of the posts, so I have to change it back to mdx. But for some reason, I can't get the syntax highlighting to work. I tried a brand new astro blog and installed expressive-code there and it worked with mdx files, so there has to be an issue in my project, I just can't find it.
When I started the project, I used a similar structure to the Astro Paper Design template which I changed more and more. I tried to remove all styling changes of the pre component, but it didn't help.
I also looked at your config for the docs, but I couldn't find anything that looked off in comparison.
Reproduction
Working version with .md files:
https://dertimonius.dev/blog/til-24
Broken version with .mdx files:
https://til-blog-13c4x9sm8-dertimonius.vercel.app/blog/til-24
related PR in my repo: DerTimonius/til-blog#164
The syntax highlighting in the mdx files worked prior to the switch to expressive-code. The only change in the PR I made to the posts was to rename them from .md to .mdx.
Expected Behavior
The syntax highlighting should be applied regardless of md or mdx file extension.
No worries about skill issues! Your site is completely missing the MDX integration, that's why it doesn't work. Try running astro add mdx using your package manager and follow the prompts. :)
I just saw that you added it in your PR. The problem in the PR is that you are overriding the remarkPlugins for MDX. Any plugins should be configured in the Astro config, not in the MDX integration config, unless you have a very specific use case that actually requires different plugins in MDX compared to MD.
you're right, the problem was the config of the remark plugins!
Thank you so much, this problem would have kept haunting me for a long time 😄