feat: add footnote support

deps.ts

@@ -13,6 +13,8 @@ export { default as GitHubSlugger } from "https://esm.sh/[email protected]?pi
 
 export { default as markedAlert } from "https://esm.sh/[email protected]?pin=v135";
 
+export { default as markedFootnote } from "https://esm.sh/[email protected]?pin=v135";
+
 export { gfmHeadingId } from "https://esm.sh/[email protected]?pin=v135";
 
 export { default as Prism } from "https://esm.sh/[email protected]?pin=v135";

mod.ts

@@ -6,6 +6,7 @@ import {
   katex,
   Marked,
   markedAlert,
+  markedFootnote,
   Prism,
   sanitizeHtml,
 } from "./deps.ts";
@@ -14,6 +15,7 @@ export { CSS, KATEX_CSS, Marked };
 
 Marked.marked.use(markedAlert());
 Marked.marked.use(gfmHeadingId());
+Marked.marked.use(markedFootnote());
 
 const slugger = new GitHubSlugger();
 

test/fixtures/footnote.html

@@ -0,0 +1,42 @@
+<p>Here is a simple footnote<sup><a id="footnote-ref-1" href="#footnote-1">1</a></sup>. With some additional text after it<sup><a id="footnote-ref-%40%23%24%25" href="#footnote-%40%23%24%25">2</a></sup> and
+without disrupting the blocks<sup><a id="footnote-ref-bignote" href="#footnote-bignote">3</a></sup>.</p>
+<section>
+<h2 id="footnote-label">Footnotes</h2>
+<ol>
+<li>
+<p>This is a footnote content. <a href="#footnote-ref-1">↩</a></p>
+</li>
+<li>
+<p>A footnote on the label: "@#$%". <a href="#footnote-ref-%40%23%24%25">↩</a></p>
+</li>
+<li>
+<p>The first paragraph of the definition.</p>
+<p>Paragraph two of the definition.</p>
+<blockquote>
+<p>A blockquote with
+multiple lines.</p>
+</blockquote>
+<pre><code>a code block</code></pre><table>
+<thead>
+<tr>
+<th>Header 1</th>
+<th>Header 2</th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Cell 1</td>
+<td>Cell 2</td>
+</tr>
+</tbody></table>
+<p>A `final` paragraph before list.</p>
+<ul>
+<li>Item 1</li>
+<li>Item 2<ul>
+<li>Subitem 1</li>
+<li>Subitem 2</li>
+</ul>
+</li>
+</ul> <a href="#footnote-ref-bignote">↩</a>
+</li>
+</ol>
+</section>

test/fixtures/footnote.md

@@ -0,0 +1,28 @@
+[^1]: This is a footnote content.
+
+Here is a simple footnote[^1]. With some additional text after it[^@#$%] and
+without disrupting the blocks[^bignote].
+
+[^bignote]: The first paragraph of the definition.
+
+    Paragraph two of the definition.
+
+    > A blockquote with
+    > multiple lines.
+
+    ~~~
+    a code block
+    ~~~
+
+    | Header 1 | Header 2 |
+    | -------- | -------- |
+    | Cell 1   | Cell 2   |
+
+    A \`final\` paragraph before list.
+
+    - Item 1
+    - Item 2
+      - Subitem 1
+      - Subitem 2
+
+[^@#$%]: A footnote on the label: "@#$%".

test/test.ts

@@ -325,3 +325,11 @@ Deno.test("basic md table with dollar signs", () => {
   const expected = Deno.readTextFileSync("./test/fixtures/basic_md_table.html");
   assertEquals(html, expected);
 });
+
+Deno.test("footnotes", () => {
+  const markdown = Deno.readTextFileSync("./test/fixtures/footnote.md");
+  const expected = Deno.readTextFileSync("./test/fixtures/footnote.html");
+
+  const html = render(markdown);
+  assertEquals(html, expected);
+});