DevTips -- MDX

moon indicating dark mode
sun indicating light mode
MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀

MDXProvider Dot Notation

You can control the rendering of different components based on their parents in MDX using the "dot notation" syntax for parents and children.

<MDXProvider
components={{
"ul.li": props => <UnorderedListElement {...props} />,
"ol.li": props => <OrderedListElement {...props} />
}}
>
{app}
</MDXProvider>

Shortcodes in MDX

You can use React components without importing them in MDX using MDXProvider!

<MDXProvider
components={{
YouTube
}}
>
{app}
</MDXProvider>
# My MDX file
Here is a livestream in which I work on Gatsby!
<YouTube video="https://www.youtube.com/watch?v=oHg5SJYRHA0" />
Let's talk about it!