gfm.server.mdx

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

GitHub flavored markdown (GFM)

This guide explores how to support GFM features such as autolink literals, footnotes, strikethrough, tables, and task lists. {/* more */} 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. Such plugins can be passed in options.remarkPlugins. More info on plugins is available in § Extending MDX

Say we have an MDX file like this:

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

import {promises as fs} from 'node:fs'
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

<>
  <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 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 align="left">b</th>
        <th align="right">c</th>
        <th align="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" checked disabled /> done
    </li>
  </ul>
  <section data-footnotes className="footnotes">
  <h2 id="footnote-label" className="sr-only">Footnotes</h2>
  <ol>
    <li id="user-content-fn-1">
      <p>
        Big note.
        <a href="#user-content-fnref-1" data-footnote-backref className="data-footnote-backref" aria-label="Back to content">↩</a>
      </p>
    </li>
  </ol>
  </section>
</>