Add example of footnotes

Fixes #118

Author: sindresorhus

index.html

@@ -445,7 +445,7 @@ <h2><a id="user-content-inline-html" class="anchor" href="#inline-html" aria-hid
 
 </a><h2><a name="user-content-html"></a><a id="user-content-inline-html-1" class="anchor" href="#inline-html-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Inline HTML</h2>
 
-<p>You can also use raw HTML in your Markdown, and it'll mostly work pretty well.</p>
+<p>You can also use raw HTML in your Markdown<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup>, and it'll mostly work pretty well<sup><a href="#user-content-fn-2" id="user-content-fnref-2" data-footnote-ref="" aria-describedby="footnote-label">2</a></sup>.</p>
 
 <pre lang="no-highlight"><code>&lt;dl&gt;
     &lt;dt&gt;Definition list&lt;/dt&gt;
@@ -1861,6 +1861,28 @@ <h3 id="user-content-backslash"><a id="user-content-backslash-escapes" class="an
         .pipe(myth())
         .pipe(gulp.dest(<span class="pl-s"><span class="pl-pds">'</span>dist<span class="pl-pds">'</span></span>));
 });</pre></div>
+
+<h2><a id="user-content-footnotes" class="anchor" href="#footnotes" aria-hidden="true"><span class="octicon octicon-link"></span></a>Footnotes</h2>
+
+<p>Here's an example of footnotes in action. This paragraph contains multiple footnote references<sup><a href="#user-content-fn-3" id="user-content-fnref-3" data-footnote-ref="" aria-describedby="footnote-label">3</a></sup> to demonstrate how they appear in GitHub-style Markdown<sup><a href="#user-content-fn-4" id="user-content-fnref-4" data-footnote-ref="" aria-describedby="footnote-label">4</a></sup>.</p>
+
+<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
+<ol>
+<li id="user-content-fn-1">
+<p>HTML elements like <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> are supported natively. <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
+</li>
+<li id="user-content-fn-2">
+<p>Though there are some limitations compared to pure Markdown syntax. <a href="#user-content-fnref-2" data-footnote-backref="" aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p>
+</li>
+<li id="user-content-fn-3">
+<p>Footnotes are automatically numbered and linked back to their references. <a href="#user-content-fnref-3" data-footnote-backref="" aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p>
+</li>
+<li id="user-content-fn-4">
+<p>GitHub's Markdown processor generates this exact HTML structure for footnotes. <a href="#user-content-fnref-4" data-footnote-backref="" aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p>
+</li>
+</ol>
+</section>
+
 		</article>
 		<a class="github-fork-ribbon" href="https://github.com/sindresorhus/github-markdown-css" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
 	</body>

readme.md

@@ -48,7 +48,7 @@ You can use [GitHub's `/markdown` API](https://docs.github.com/en/free-pro-team@
 
 There are 3 themes provided in this package:
 
-- **github-markdown.css**: (default) Automatically switches between light and dark through [`@media (prefers-color-scheme)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+- **github-markdown.css**: (default) Automatically switches between light and dark through [`@media (prefers-color-scheme)`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme).
 - **github-markdown-light.css**: Light-only.
 - **github-markdown-dark.css**: Dark-only.