What is MDX Markdown?

Jul 24, 2022 | O. Wolfson
html javascript markdown react

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>

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.

Video tutorials:

Easily create a blog with Next.js, MDX, SSG and Syntax Highlighting


NextJS Blog With next-mdx-remote