marked-footnote
Advanced tools
A marked extension to support GFM footnotes.
You can install marked-footnote using npm or yarn:
npm i marked-footnote
# or
yarn add marked-footnote
Once you've installed this extension, you can use it in your marked configuration. Here's an example of how to configure it:
Say we have the following file example.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Marked Footnote</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-light.min.css"
integrity="sha512-bm684OXnsiNuQSyrxuuwo4PHqr3OzxPpXyhT66DA/fhl73e1JmBxRKGnO/nRwWvOZxJLRCmNH7FII+Yn1JNPmg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
#content {
margin: 0 auto;
padding: 1rem;
max-width: 928px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
word-wrap: normal;
border: 0;
}
</style>
</head>
<body class="markdown-body">
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-footnote/dist/index.umd.min.js"></script>
<script>
const md = `# Example
[^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: "@#$%".
`
document.getElementById('content').innerHTML = new marked.Marked()
.use(markedFootnote())
.parse(md)
</script>
</body>
</html>
Say we have the following file example.md:
# Example
[^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: "@#$%".
Note: The position of a footnote in your Markdown does not influence where the footnote will be rendered. You can write a footnote right after your reference to the footnote, and the footnote will still render at the bottom of the Markdown.
And our module example.js looks as follows:
import { readFileSync } from 'node:fs'
import { Marked } from 'marked'
import markedFootnote from 'marked-footnote'
const html = new Marked()
.use(markedFootnote())
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
Now, running node example.js yields:
<h1>Example</h1>
<p>
Here is a simple footnote<sup
><a
id="footnote-ref-1"
href="#footnote-1"
data-footnote-ref
aria-describedby="footnote-label"
>1</a
></sup
>. With some additional text after it<sup
><a
id="footnote-ref-%40%23%24%25"
href="#footnote-%40%23%24%25"
data-footnote-ref
aria-describedby="footnote-label"
>2</a
></sup
>
and without disrupting the blocks<sup
><a
id="footnote-ref-bignote"
href="#footnote-bignote"
data-footnote-ref
aria-describedby="footnote-label"
>3</a
></sup
>.
</p>
<section class="footnotes" data-footnotes>
<h2 id="footnote-label" class="sr-only">Footnotes</h2>
<ol>
<li id="footnote-1">
<p>
This is a footnote content.
<a
href="#footnote-ref-1"
data-footnote-backref
aria-label="Back to reference 1"
>↩</a
>
</p>
</li>
<li id="footnote-%40%23%24%25">
<p>
A footnote on the label: "@#$%".
<a
href="#footnote-ref-%40%23%24%25"
data-footnote-backref
aria-label="Back to reference @#$%"
>↩</a
>
</p>
</li>
<li id="footnote-bignote">
<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 <code>final</code> 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"
data-footnote-backref
aria-label="Back to reference bignote"
>↩</a
>
</li>
</ol>
</section>
By default, this plugin does not place footnote markers in square brackets ([1]), instead like this: 1. So you will need to add the style as shown below to your CSS:
[data-footnote-ref]::before {
content: '[';
}
[data-footnote-ref]::after {
content: ']';
}
The marked-footnote extension accepts the following configuration options:
prefixId: The prefix ID for footnotes. Defaults to 'footnote-'.
description: The description of footnotes, used by aria-labeledby attribute. Defaults to 'Footnotes'.
refMarkers: If set to true, it will place footnote reference in square brackets, like this: [1]. Defaults to false.
When considering the use of footnotes in your content, it's important to keep in mind the following accessibility and usability factors:
See extensions list.
We 💛 issues.
When committing, please conform to the semantic-release commit standards. Please install commitizen and the adapter globally, if you have not already.
npm i -g commitizen cz-conventional-changelog
Now you can use git cz or just cz instead of git commit when committing. You can also use git-cz, which is an alias for cz.
git add . && git cz
A project by Stilearning © 2023-2024.
FAQs
A marked extension to support GFM footnotes
The npm package marked-footnote receives a total of 0 weekly downloads. As such, marked-footnote popularity was classified as not popular.
We found that marked-footnote demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
