export const info = { author: [ {github: 'wooorm', name: 'Titus Wormer'} ], modified: new Date('2025-01-27'), published: new Date('2021-10-06') } export const navSortSelf = 1

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:

mdx

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## 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:

// @filename: example.js
/// <reference types="node" />
// ---cut---
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]})
  )
)

<details> <summary>Expand equivalent JSX</summary>

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:[email protected]">[email protected]</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>
</>

</details>