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
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
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
