Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Learn more about #100DaysOfGatsby here!
Challenge 5: Mix Markdown and React Using MDX
Use React components within your Markdown-based blog posts!
Markdown is a great markup language for creating human readable, long form content. A writer on your team can use Markdown’s friendly syntax and contribute content to a site without having to edit HTML or JSX directly.
Today we invite you to use MDX, a new format that lets you add components in your Markdown documents. Now, editors can add interactive and styled elements to their documents, not just static, plain text.
Challenge Resources
Use Gatsby’s MDX tutorial and substitute the example “chart component” with the “form component” you created in a previous challenge.
Bonus: Learn about an advanced MDX feature, “shortcodes”. Then enable an example of this feature by using a Gatsby plugin from the community, gatsby-mdx-embed.
What to Do If You Need Help
If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.
For this challenge, you can also use the MDX support resources