Add support for GFM footnotes

index.js

@@ -2,6 +2,7 @@
  * @typedef {import('micromark-util-types').Extension} Extension
  * @typedef {import('micromark-util-types').HtmlExtension} HtmlExtension
  * @typedef {import('micromark-extension-gfm-strikethrough').Options} Options
+ * @typedef {import('micromark-extension-gfm-footnote').HtmlOptions} HtmlOptions
  */
 
 import {
@@ -12,6 +13,7 @@ import {
   gfmAutolinkLiteral,
   gfmAutolinkLiteralHtml
 } from 'micromark-extension-gfm-autolink-literal'
+import {gfmFootnote, gfmFootnoteHtml} from 'micromark-extension-gfm-footnote'
 import {
   gfmStrikethrough,
   gfmStrikethroughHtml
@@ -32,6 +34,7 @@ import {
 export function gfm(options) {
   return combineExtensions([
     gfmAutolinkLiteral,
+    gfmFootnote(),
     gfmStrikethrough(options),
     gfmTable,
     gfmTaskListItem
@@ -41,11 +44,13 @@ export function gfm(options) {
 /**
  * Support to compile GFM to HTML.
  *
+ * @param {HtmlOptions} [options]
  * @returns {HtmlExtension}
  */
-export function gfmHtml() {
+export function gfmHtml(options) {
   return combineHtmlExtensions([
     gfmAutolinkLiteralHtml,
+    gfmFootnoteHtml(options),
     gfmStrikethroughHtml,
     gfmTableHtml,
     gfmTagfilterHtml,

package.json

@@ -36,6 +36,7 @@
   ],
   "dependencies": {
     "micromark-extension-gfm-autolink-literal": "^1.0.0",
+    "micromark-extension-gfm-footnote": "^1.0.0",
     "micromark-extension-gfm-strikethrough": "^1.0.0",
     "micromark-extension-gfm-table": "^1.0.0",
     "micromark-extension-gfm-tagfilter": "^1.0.0",

readme.md

@@ -55,6 +55,12 @@ Say we have the following file, `example.md`:
 
 www.example.com, https://example.com, and contact@example.com.
 
+## Footnote
+
+A note[^1]
+
+[^1]: Big note.
+
 ## Strikethrough
 
 ~one~ or ~~two~~ tildes.
@@ -96,6 +102,8 @@ Now, running `node example` yields:
 <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>
@@ -116,6 +124,13 @@ Now, running `node example` yields:
 <li><input disabled="" type="checkbox"> to do</li>
 <li><input checked="" disabled="" type="checkbox"> done</li>
 </ul>
+<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<ol>
+<li id="user-content-fn-1">
+<p>Big note. <a href="#user-content-fnref-1" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content">↩</a></p>
+</li>
+</ol>
+</section>
 ```
 
 ## API