A marked extension to support GFM footnotes
npm install marked-footnoteA marked extension to support GFM footnotes.
- Install
- Usage
- Browser
- Node.js
- Options
- Limitations
- Related
- Contributing
- License
You can install marked-footnote using npm or yarn:
``bash`
npm i marked-footnoteor
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:
`html
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"
/>
`
Say we have the following file example.md:
``mdExample
[^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:
`js
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:
` The first paragraph of the definition. Paragraph two of the definition. A blockquote with multiple lines. A html`Example
Here is a simple footnote
href="#footnote-1"
data-footnote-ref
aria-describedby="footnote-label"
>1 > >. With some additional text after it
href="#footnote-%40%23%24%25"
data-footnote-ref
aria-describedby="footnote-label"
>2 > >
and without disrupting the blocks
href="#footnote-bignote"
data-footnote-ref
aria-describedby="footnote-label"
>3 > >.
Footnotes
This is a footnote content.
data-footnote-backref
aria-label="Back to reference 1"
>ā© >
A footnote on the label: "@#$%".
data-footnote-backref
aria-label="Back to reference @#$%"
>ā© >
a code block
Header 1
Header 2
Cell 1
Cell 2
final paragraph before list.
Item 2
data-footnote-backref
aria-label="Back to reference bignote"
>ā© >
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:
`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-'.
- prefixData: The prefix for the main data attribute for footnotes. Defaults to '', an empty string, making the attribute equal data-footnotes.
- 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.
- footnoteDivider: If set to true, it will insert a horizontal rule above the footnotes at the bottom of the page. Defaults to false.
- keepLabels: If set to true, it will keep the original labels of footnote references in the generated HTML output. If not, the references will be labelled by numbers starting with 1 and incremented by 1 from left to right, top to down. Defaults to false.
- sectionClass: The CSS class set to the element wrapping all footnotes at the bottom of the page. Can be set to an empty string to remove the CSS class. Defaults to 'footnotes'.
- headingClass: The CSS class set to the heading element introducing the footnotes at the bottom of the page for screen reader users. Can be set to an empty string to remove the CSS class. Defaults to 'sr-only'.
- backRefLabel: ARIA label of the links referring back to the location in the text of the page where the footnote has been referred from. Defaults to 'Back to reference {0}'. The placeholder {0} will be replaced by the footnote marker text.
When considering the use of footnotes in your content, it's important to keep in mind the following accessibility and usability factors:
1. Screen Reader Compatibility: Screen readers may not effectively convey footnotes. They tend to read the footnote number without indicating that it's a footnote or using superscript. Additionally, they may not identify the link to the footnote text.
2. Accessibility Challenges: Footnotes pose challenges for all users on a web page. To access them, one often needs to scroll to the end of the page, read the footnote, and then click back to the main content. Not everyone is aware that they should click on the footnote at the end, potentially causing them to lose their place. Moreover, if the same footnote is repeated multiple times, clicking on the link could lead to the wrong location.
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.
`bash`
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.
`bash``
git add . && git cz
A project by Stilearning © 2023-2024.