Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
The remark-gfm npm package is a plugin for remark, a markdown processor powered by plugins part of the unified collective. It adds support for GitHub Flavored Markdown (GFM) to remark, enabling additional syntax features that are commonly used on GitHub.
Table
Enables support for GFM tables, allowing you to create tables in markdown.
const remark = require('remark');
const gfm = require('remark-gfm');
remark().use(gfm).processSync('| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |').toString();
Strikethrough
Adds the ability to use strikethrough text using double tildes (~~).
const remark = require('remark');
const gfm = require('remark-gfm');
remark().use(gfm).processSync('~~Strikethrough~~').toString();
Tasklist
Supports task lists with checkboxes, a common feature in GitHub issue and pull request comments.
const remark = require('remark');
const gfm = require('remark-gfm');
remark().use(gfm).processSync('- [ ] todo item
- [x] done item').toString();
Autolink Literals
Automatically converts URLs and email addresses into links.
const remark = require('remark');
const gfm = require('remark-gfm');
remark().use(gfm).processSync('Autolink: https://example.com').toString();
markdown-it is a Markdown parser with GFM support and a similar plugin ecosystem. It is often used for its performance and extensibility but is not part of the unified collective.
showdown is another Markdown to HTML converter that supports GFM. It is known for its client-side capabilities and can be used in the browser, which differs from remark-gfm that is typically used in Node.js environments.
marked is a fast markdown parser and compiler. It supports GFM and is designed to be lightweight and simple to use. It is a standalone package, unlike remark-gfm which is a plugin for remark.
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
This package is a unified (remark) plugin to enable the extensions to
markdown that GitHub adds: autolink literals (www.x.com
), footnotes ([^1]
),
strikethrough (~~stuff~~
), tables (| cell |…
), and tasklists (* [x]
).
You can use this plugin to add support for parsing and serializing them.
These extensions by GitHub to CommonMark are called GFM (GitHub Flavored
Markdown).
unified is a project that transforms content with abstract syntax trees (ASTs). remark adds support for markdown to unified. mdast is the markdown AST that remark uses. This is a remark plugin that transforms mdast.
This project is useful when you want to support the same features that GitHub
does in files in a repo, Gists, and several other places.
Users frequently believe that some of these extensions, specifically autolink
literals and tables, are part of normal markdown, so using remark-gfm
will
help match your implementation to their understanding of markdown.
There are several edge cases where GitHub’s implementation works in unexpected
ways or even different than described in their spec, so writing in GFM is not
always the best choice.
This plugin does not handle how markdown is turned to HTML.
That’s done by remark-rehype
.
If your content is not in English and uses footnotes, you should configure that
plugin.
When generating HTML, you might also want to enable rehype-slug
to add id
s on headings.
A different plugin, remark-frontmatter
, adds support for
frontmatter.
GitHub supports YAML frontmatter for files in repos and Gists but they don’t
treat it as part of GFM.
Another plugin, remark-github
, adds support for how markdown
works in relation to a certain GitHub repo in comments, issues, PRs, and
releases, by linking references to commits, issues, and users.
Yet another plugin, remark-breaks
, turns soft line endings
(enters) into hard breaks (<br>
s).
GitHub does this in a few places (comments, issues, PRs, and releases).
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install remark-gfm
In Deno with Skypack:
import remarkGfm from 'https://cdn.skypack.dev/remark-gfm@3?dts'
In browsers with Skypack:
<script type="module">
import remarkGfm from 'https://cdn.skypack.dev/remark-gfm@3?min'
</script>
Say we have the following file example.md
:
# GFM
## Autolink literals
www.example.com, https://example.com, and contact@example.com.
## Footnote
A note[^1]
[^1]: Big note.
## Strikethrough
~one~ or ~~two~~ tildes.
## Table
| a | b | c | d |
| - | :- | -: | :-: |
## Tasklist
* [ ] to do
* [x] done
And our module example.js
looks as follows:
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeStringify)
.process(await read('example.md'))
console.log(String(file))
}
Now running node example
yields:
<h1>GFM</h1>
<h2>Autolink literals</h2>
<p><a href="http://www.example.com">www.example.com</a>, <a href="https://example.com">https://example.com</a>, and <a href="mailto:contact@example.com">contact@example.com</a>.</p>
<h2>Footnote</h2>
<p>A note<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
<h2>Strikethrough</h2>
<p><del>one</del> or <del>two</del> tildes.</p>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>a</th>
<th align="left">b</th>
<th align="right">c</th>
<th align="center">d</th>
</tr>
</thead>
</table>
<h2>Tasklist</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled> to do</li>
<li class="task-list-item"><input type="checkbox" checked disabled> done</li>
</ul>
<section data-footnotes class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
<p>Big note. <a href="#user-content-fnref-1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
</ol>
</section>
This package exports no identifiers.
The default export is remarkGfm
.
unified().use(remarkGfm[, options])
Plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
options
Configuration (optional).
options.singleTilde
Whether to parse strikethrough with a single tilde (boolean
, default:
true
).
Single tildes work on github.com, but are technically prohibited by the GFM
spec.
options.tableCellPadding
Serialize tables with a space between delimiters (|
) and cell content
(boolean
, default: true
).
options.tablePipeAlign
Serialize by aligning the delimiters (|
) between table cells so that they all
align nicely and form a grid (boolean
, default: true
).
options.stringLength
Function to detect the length of table cell content (Function
, default:
s => s.length
).
This is used when aligning the delimiters (|
) between table cells.
Full-width characters and emoji mess up delimiter alignment when viewing the
markdown source.
To fix this, you can pass this function, which receives the cell content and
returns its “visible” size.
Note that what is and isn’t visible depends on where the text is displayed.
singleTilde
To turn off support for parsing strikethrough with single tildes, pass
singleTilde: false
:
// …
const file = await unified()
.use(remarkParse)
.use(remarkGfm, {singleTilde: false})
.use(remarkRehype)
.use(rehypeStringify)
.process('~one~ and ~~two~~')
console.log(String(file))
Yields:
<p>~one~ and <del>two</del></p>
stringLength
It’s possible to align tables based on the visual width of cells. First, let’s show the problem:
import {remark} from 'remark'
import remarkGfm from 'remark-gfm'
main()
async function main() {
const input = `| Alpha | Bravo |
| - | - |
| 中文 | Charlie |
| 👩❤️👩 | Delta |`
const file = await remark()
.use(remarkGfm)
.process(input)
console.log(String(file))
}
The above code shows how remark can be used to format markdown. The output is as follows:
| Alpha | Bravo |
| -------- | ------- |
| 中文 | Charlie |
| 👩❤️👩 | Delta |
To improve the alignment of these full-width characters and emoji, pass a
stringLength
function that calculates the visual width of cells.
One such algorithm is string-width
.
It can be used like so:
@@ -1,5 +1,6 @@
import {remark} from 'remark'
import remarkGfm from 'remark-gfm'
+import stringWidth from 'string-width'
main()
@@ -10,7 +11,7 @@ async function main() {
| 👩❤️👩 | Delta |`
const file = await remark()
- .use(remarkGfm)
+ .use(remarkGfm, {stringLength: stringWidth})
.process(input)
console.log(String(file))
The output of our code with these changes is as follows:
| Alpha | Bravo |
| ----- | ------- |
| 中文 | Charlie |
| 👩❤️👩 | Delta |
This package is fully typed with TypeScript.
It exports an Options
type, which specifies the interface of the accepted
options.
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
This plugin works with remark-parse
version 10+ (remark
version 14+).
The previous version (v2) worked with remark-parse
version 9 (remark
version 13).
Earlier versions of remark-parse
and remark
had a gfm
option that enabled
this functionality, which defaulted to true.
Use of remark-gfm
does not involve rehype (hast) so there are
no openings for cross-site scripting (XSS) attacks.
remark-github
— link references to commits, issues, PRs, and usersremark-breaks
— support breaks without needing spaces or escapes (enters to <br>
)remark-frontmatter
— support frontmatter (YAML, TOML, and more)remark-directive
— support directivesremark-math
— support mathSee contributing.md
in remarkjs/.github
for ways
to get started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
The npm package remark-gfm receives a total of 2,872,488 weekly downloads. As such, remark-gfm popularity was classified as popular.
We found that remark-gfm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.