Next.js Discord

Discord Forum

Using rehype-highlight with Next.js and MDX

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
I tried to follow [this article](https://colinhemphill.com/blog/markdown-syntax-highlighting-with-the-nextjs-app-router) to add code-highlighting to my .mdx-pages. The post states, that once rehypeHighlight is added as a rehype-plugin in next.config.mjs, the code-snippets should be translated as html as seen in the attached image.

But that isn't true for me. For me a code-block is translated like this:

 html
<pre><code class="language-rs">fn main() {
    println!("hello, World!");
}
</code></pre>


so there are no hljs classes. I consequently couldn't style the code-snippets. Any idea why this is happening? What have I done wrong here?

You can look at my next-config and the code in context here: https://github.com/tim-hilt/website/blob/main/next.config.mjs
Answered by Saltwater Crocodile
Ok - so I found out why it wouldn't work: Turbopack! It seems like mdxRs: false and next dev --turbo don't play well with each other at this time. I think I'll open a bug along with a reproduction-repo in the next-repository.
View full answer

2 Replies

Saltwater CrocodileOP
Seems to be a regression and related to https://github.com/vercel/next.js/issues/46659. I'll try with the latest canary later today and open a new issue if it doesn't work.

I see a lot of SO-posts or comments on GitHub to just disable mdxRs in the next-config, but it seems this crashes other stuff
Saltwater CrocodileOP
Ok - so I found out why it wouldn't work: Turbopack! It seems like mdxRs: false and next dev --turbo don't play well with each other at this time. I think I'll open a bug along with a reproduction-repo in the next-repository.
Answer