| 2022-07-24

What is MDX Markdown

    Markdown is a plain text formatting syntax. Markdown lets you write plain text that can be converted to formatted HTML. MDX is an extension to Markdown which allows you to write JSX in your Markdown documents. This is why they call it Markdown for the component era. You could embed interactive alerts, dynamic charts, or media components for images and video in your Markdown..

    JSX in Markdown

    An example of JSX code that can be written in an MDX document.

    <div style={{ padding: "1rem", backgroundColor: "tomato" }}>
      Just a bit of text with a background color of `tomato`.
    </div>
    
    JSX

    As processed from this MDX document.

    Just a bit of text with a background color of tomato.

    React Components

    A React component that can be written to an MDX document.

    <Image
        src="/images/posts/mdx/tomato.jpg"
        alt="a tomato"
        height="427"
        width="640"
    />
    

    As processed from this MDX document.

    kitten

    Photo credit: Avin CP aka @avincp on Upsplash

    More Information:

    Read more about MDX here

    More about using MDX in a Next.js project

    This blog uses a Next.js MDX package: next-mdx-remote.

    Here is an example from Next.js of a site made using mdx-remote.

    Simple Example: Next.js project example using MDX.


    Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.