Skip to navigation

GitHub 风格的 Markdown (GFM)

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

假设我们有一个像这样的 MDX 文件:

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 可以用以下模块进行转换:

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]})
  )
)
展开等效的 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>
</>
MDX 中文网 - 粤ICP备13048890号