GitHub flavored markdown (GFM)

This guide explores how to support GFM features such as autolink literals, footnotes, strikethrough, tables, and task lists. MDX supports standard markdown syntax (CommonMark). That means GitHub flavored markdown (GFM) extensions are not supported by default. They can be enabled by using a remark plugin: remark-gfm. That plugin, like all remark plugins, can be passed in remarkPlugins in ProcessorOptions. More info on plugins is available in § Extending MDX

Say we have an MDX file like this:

example.mdx

# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

The above MDX with GFM can be transformed with the following module:

example.js

import fs from 'node:fs/promises'
import {compile} from '@mdx-js/mdx'
import remarkGfm from 'remark-gfm'

console.log(
  String(
    await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]})
  )
)

Expand equivalent JSX

output.jsx

<>
  <h1>GFM</h1>
  <h2>Autolink literals</h2>
  <p>
    <a href="http://www.example.com">www.example.com</a>,{' '}
    <a href="https://example.com">https://example.com</a>, and{' '}
    <a href="mailto:contact@example.com">contact@example.com</a>.
  </p>
  <h2>Footnote</h2>
  <p>
    A note
    <sup>
      <a
        href="#user-content-fn-1"
        id="user-content-fnref-1"
        data-footnote-ref="true"
        aria-describedby="footnote-label"
      >
        1
      </a>
    </sup>
  </p>
  <h2>Strikethrough</h2>
  <p>
    <del>one</del> or <del>two</del> tildes.
  </p>
  <h2>Table</h2>
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th style={{textAlign: 'left'}}>b</th>
        <th style={{textAlign: 'right'}}>c</th>
        <th style={{textAlign: 'center'}}>d</th>
      </tr>
    </thead>
  </table>
  <h2>Tasklist</h2>
  <ul className="contains-task-list">
    <li className="task-list-item">
      <input type="checkbox" disabled /> to do
    </li>
    <li className="task-list-item">
      <input type="checkbox" disabled checked />
      done
    </li>
  </ul>
  <section data-footnotes="true" className="footnotes">
    <h2 className="sr-only" id="footnote-label">
      Footnotes
    </h2>
    <ol>
      <li id="user-content-fn-1">
        <p>
          Big note.{' '}
          <a
            href="#user-content-fnref-1"
            data-footnote-backref=""
            aria-label="Back to reference 1"
            className="data-footnote-backref"
          >
            ↩
          </a>
        </p>
      </li>
    </ol>
  </section>
</>