npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

remark-gfm

v4.0.0

Published

remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)

Downloads

15,855,432

Readme

remark-gfm

Build Coverage Downloads Size Sponsors Backers Chat

remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).

Contents

What is this?

This package is a unified (remark) plugin to enable the extensions to markdown that GitHub adds with GFM: 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).

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 ids 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).

When should I use this?

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.

If you just want to turn markdown into HTML (with maybe a few extensions such as GFM), we recommend micromark with micromark-extension-gfm instead. If you don’t use plugins and want to access the syntax tree, you can use mdast-util-from-markdown with mdast-util-gfm.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install remark-gfm

In Deno with esm.sh:

import remarkGfm from 'https://esm.sh/remark-gfm@4'

In browsers with esm.sh:

<script type="module">
  import remarkGfm from 'https://esm.sh/remark-gfm@4?bundle'
</script>

Use

Say our document example.md contains:

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## 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 contains:

import rehypeStringify from 'rehype-stringify'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {read} from 'to-vfile'
import {unified} from 'unified'

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(await read('example.md'))

console.log(String(file))

…then running node example.js 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:[email protected]">[email protected]</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 class="sr-only" id="footnote-label">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>

API

This package exports no identifiers. The default export is remarkGfm.

unified().use(remarkGfm[, options])

Add support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).

Parameters
  • options (Options, optional) — configuration
Returns

Nothing (undefined).

Options

Configuration (TypeScript type).

Fields
  • stringLength (((value: string) => number), default: d => d.length) — detect the size of table cells, used when aligning cells
  • singleTilde (boolean, default: true) — whether to support strikethrough with a single tilde; single tildes work on github.com, but are technically prohibited by GFM; you can always use 2 or more tildes for strikethrough
  • tablePipeAlign (boolean, default: true) — whether to align table pipes
  • tableCellPadding (boolean, default: true) — whether to add a space of padding between table pipes and cells

Examples

Example: 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>

Example: 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'

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'

@@ -10,7 +11,7 @@ async function main() {
 | 👩‍❤️‍👩 | Delta |`

-const file = await remark().use(remarkGfm).process(input)
+const file = await remark()
+  .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   |

Bugs

For bugs present in GFM but not here, or other peculiarities that are supported, see each corresponding readme:

Authoring

For recommendations on how to author GFM, see each corresponding readme:

HTML

This plugin does not handle how markdown is turned to HTML. See remark-rehype for how that happens and how to change it.

CSS

For info on how GitHub styles these features, see each corresponding readme:

Syntax

For info on the syntax of these features, see each corresponding readme:

Syntax tree

For info on the syntax tree of these features, see each corresponding readme:

Types

This package is fully typed with TypeScript. It exports the additional type Options.

The node types are supported in @types/mdast by default.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, remark-gfm@^4, compatible with Node.js 16.

This plugin works with remark-parse version 11+ (remark version 15+). The previous version (v3) worked with remark-parse version 10 (remark version 14). Before that, 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.

Security

Use of remark-frontmatter does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.

Related

Contribute

See 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.

License

MIT © Titus Wormer