Writing a Custom Note Component for MDX
May 06, 2020
Back when I was looking for inspiration while building my personal website and blog, I stumbled upon Tania Rascia's site.
One of my favorite parts were her "custom blocks" - colorful components used to annoate or add helpful information to her articles. I made a note to create some for mine when I had the time.
Now that I've found the time, I've learned there are multiple ways to do it. In this post, I'll explain a couple of ways to write a custom
<Note /> component for MDX.
We can go the JSX route and do it straight up.
This works and it's intuitive, but it feels like a lot of work! I'd rather write Markdown and let MDX handle the rest for me.
<Note>**Note:** You _might_ want to check this out! [Link](https://freecodecamp.org/)</Note>
Note: You might want to check this out! Link
I like this approach more because it allows me to a) write markdown and b) put it in a styled container. I let MDX handle the hard stuff for me!