Best way to write markdown

MDX is an extension to Markdown that lets you include JSX in Markdown documents.

Getting Started

Markdown defines a plain text syntax for HTML elements such as h1, strong, and a, but still supports inline HTML. An example Markdown document follows.

In MD:

# Hello world!

You can use Markdown to create documents for [Gatsby](https://www.gatsbyjs.com/).

<figure class="chart">
  <object data="chart.svg" type="image/svg+xml"></object>
  <figcaption>MDX adoption has increased 120% since last year.</figcaption>
</figure>

MDX takes this one step further, and makes it possible to use JSX in your Markdown documents. Try making the figure element into a Figure component.

In JSX:

export const Figure = props => {
  return (
    <figure class="chart">
      <object data={props.data} type="image/svg+xml"></object>
      <figcaption>{props.caption}</figcaption>
    </figure>
  )
}

Now you can import this component into your Markdown document.

In MD:

import { Figure } from "./components/Figure"

# Hello world!

You can use Markdown to create documents for [Gatsby](https://www.gatsbyjs.com/).

<Figure data="chart.svg" caption="MDX adoption has increased 120% since last year." />

Note: Any JSX runtime: React, Preact, Vue, Emotion, you name it, they’re all supported in MDX 2.

Learn More

You can learn more from MDX documentation.

Connect with me ^_^

If you like this article, kindly follow my github account for more and be sure to ⭐ it.