GitHub 风格的 Markdown (GFM)

¥GitHub flavored markdown (GFM)

本指南探讨如何支持 GFM 功能，例如自动链接字面量、脚注、删除线、表格和任务列表。 MDX 支持标准 Markdown 语法 (CommonMark)。这意味着默认情况下不支持 GitHub 风格的 Markdown (GFM) 扩展。可以通过使用 remark 插件来启用它们：remark-gfm。该插件与所有 remark 插件一样，可以在 remarkPlugins 于 ProcessorOptions 中传递。有关插件的更多信息可在 § 扩展 MDX 中找到

¥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

假设我们有一个像这样的 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

上面带有 GFM 的 MDX 可以用以下模块进行转换：

¥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>
</>