Question: MDX syntax highlighting
wtLau opened this issue · comments
Hi Lee,
Thank you for creating such blog and educational content. They really helped me understand Next.js better and motivates me to write my naive blogs in the hope to help others!
I am having a difficult time understanding how syntax highlight works in your app. I believe rehypePlugins: [mdxPrism] in mdx.js is doing the heavy lifting for transforming the highlighted syntax. However, you didn't create an MDX component for <pre> and <code> as per MDX doc so I am lost on how it works. Is there something else besides the mdx.js file that contributes to this? or maybe I was just doing something incorrectly.
I went through your personal blog, next js blog using the prism but got more confused because they seem to use different approachs.
Any pointers would be appreciated!
mdxPrism adds the prism classes to code blocks automatically therefore eliminating the need to have custom components.
Then the code's theme is in the global CSS file applied to the entire project which styles the classes that mdxPrism adds.
Correct! And when parsing the Markdown files, code snippets get automatically converted into their corresponding HTML tags.