Question regarding your code blocks
opened this issue · comments
Dear @leerob, I've been taking inspiration from this project for my own blog, and it's been of great help. I have one question. I have a similar setup with next-mdx-enhanced and I want to add syntax highlighting. My question is, where do you add the file name to the code block? I can't seem to find this in your project. In your MDX files your are declaring your code blocks like js:components/Subscribe.js. Where do you extract this string and insert it into the layout? Also, can you give me some guiding advice on parsing the code blocks in a separate component? In your posts, you are declaring code blocks in the 'traditional' Markdown syntax. However, one of the key features of MDX is the support for using JSX components in MDX. I would like to declare my code blocks like:
<Code language="tsx" fileName="src/index.tsx">
function getAge(person: Person) {
return person.age;
}
</Code>
Getting this to work and be pasted in a <pre> tag wouldn't be to difficult. I just need some guidance on how to do the syntax highlighting on this.
If you could help me out it would be greatly appreciated!
Hey 👋
Glad it's been helpful. You are correct, I use the syntax js:components/Subscribe.js to add file names to the code blocks. I don't manually define the code component anywhere since mdx-prism takes care of parsing the Markdown code block and handling line highlighting and code titles. There are a couple of pieces here:
- Prism theme that's available as a global stylee
- The correct plugins in
next.config.js
You could definitely create your own custom Code component if you want. Here's a couple examples using Next:
Thanks so much for the quick response! One more question though. Would rendering the code in React components have any downsides to directly rendering it inside the MDX file? I prefer the syntax using React components but this code never changes so maybe using a React component has a performance impact?
It seems like going for the React approach and using prism-react-renderer will be a lot easier. Does it come with any performance problems? It is true that your approach gets converted to plain html during build time while prism-react-renderer does this highlighting on the client? If so, is there an approach with Next.js that does the syntax highlighting on build and allows me to use React components in my MDX?
The main reason I choose vanilla Markdown over a React component inside MDX is for when I inevitably change my website again in the coming years. I've ported Markdown files a few times now between different static site generators (Jekyll, Hugo, and now Next) and keeping Markdown as the source of truth has helped a lot.
It is true that your approach gets converted to plain html during build time
Yes, I serve static HTML files using Next.js's concept of "pre-rendering". Since I don't use getServerSideProps, I'm serving static assets. This will be the same whether you use my approach or if you use prism-react-renderer. They should both still be compiled to a static page during the build process.
OK, thank you so much for the help! I'll go and implement the syntax highlighting tomorrow. I'm feeling a lot better about using prism-react-renderer now that I know it also renders to static HTML on build, this way the browser doesn't have to wait for the code to become highlighted. It seems like a much simpler approach than using Markdown plugins since I plan on using MDX for the good future with this project. I haven't worked with rehype and remark before and I don't mind skipping it. Thanks a lot for your quick response and have a good day!