- Notifications
You must be signed in to change notification settings - Fork30
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
License
remarkjs/remark-gfm
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
remark plugin to supportGFM (autolink literals, footnotes,strikethrough, tables, tasklists).
- What is this?
- When should I use this?
- Install
- Use
- API
- Examples
- Bugs
- Authoring
- HTML
- CSS
- Syntax
- Syntax tree
- Types
- Compatibility
- Security
- Related
- Contribute
- License
This package is aunified (remark) plugin to enable the extensions tomarkdown 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 calledGFM (GitHub FlavoredMarkdown).
This plugin does not handle how markdown is turned to HTML.That’s done byremark-rehype
.If your content is not in English and uses footnotes, you should configure thatplugin.When generating HTML, you might also want to enablerehype-slug
to addid
s on headings.
A different plugin,remark-frontmatter
, adds support forfrontmatter.GitHub supports YAML frontmatter for files in repos and Gists but they don’ttreat it as part of GFM.
Another plugin,remark-github
, adds support for how markdownworks in relation to a certain GitHub repo in comments, issues, PRs, andreleases, 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 project is useful when you want to support the same features that GitHubdoes in files in a repo, Gists, and several other places.Users frequently believe that some of these extensions, specifically autolinkliterals and tables, are part of normal markdown, so usingremark-gfm
willhelp match your implementation to their understanding of markdown.There are several edge cases where GitHub’s implementation works in unexpectedways or even different than described in their spec, sowriting in GFM is notalways the best choice.
If youjust want to turn markdown into HTML (with maybe a few extensions suchas GFM), we recommendmicromark
withmicromark-extension-gfm
instead.If you don’t use plugins and want to access the syntax tree, you can usemdast-util-from-markdown
withmdast-util-gfm
.
This package isESM only.In Node.js (version 16+), install withnpm:
npm install remark-gfm
In Deno withesm.sh
:
importremarkGfmfrom'https://esm.sh/remark-gfm@4'
In browsers withesm.sh
:
<scripttype="module">importremarkGfmfrom'https://esm.sh/remark-gfm@4?bundle'</script>
Say our documentexample.md
contains:
#GFM##Autolink literalswww.example.com,https://example.com, andcontact@example.com.##FootnoteA note[^1][^1]: Big note.##Strikethrough~one~ or~~two~~ tildes.##Table| a| b| c| d|| -| :-| -:| :-:|##Tasklist*[ ] to do*[x] done
…and our moduleexample.js
contains:
importrehypeStringifyfrom'rehype-stringify'importremarkGfmfrom'remark-gfm'importremarkParsefrom'remark-parse'importremarkRehypefrom'remark-rehype'import{read}from'to-vfile'import{unified}from'unified'constfile=awaitunified().use(remarkParse).use(remarkGfm).use(remarkRehype).use(rehypeStringify).process(awaitread('example.md'))console.log(String(file))
…then runningnode example.js
yields:
<h1>GFM</h1><h2>Autolink literals</h2><p><ahref="http://www.example.com">www.example.com</a>,<ahref="https://example.com">https://example.com</a>, and<ahref="mailto:contact@example.com">contact@example.com</a>.</p><h2>Footnote</h2><p>A note<sup><ahref="#user-content-fn-1"id="user-content-fnref-1"data-footnote-refaria-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><thalign="left">b</th><thalign="right">c</th><thalign="center">d</th></tr></thead></table><h2>Tasklist</h2><ulclass="contains-task-list"><liclass="task-list-item"><inputtype="checkbox"disabled> to do</li><liclass="task-list-item"><inputtype="checkbox"checkeddisabled> done</li></ul><sectiondata-footnotesclass="footnotes"><h2class="sr-only"id="footnote-label">Footnotes</h2><ol><liid="user-content-fn-1"><p>Big note.<ahref="#user-content-fnref-1"data-footnote-backrefclass="data-footnote-backref"aria-label="Back to content">↩</a></p></li></ol></section>
This package exports no identifiers.The default export isremarkGfm
.
Add support GFM (autolink literals, footnotes, strikethrough, tables,tasklists).
options
(Options
, optional)— configuration
Nothing (undefined
).
Configuration (TypeScript type).
firstLineBlank
(boolean
, default:false
)— serialize with a blank line for the first line of footnote definitionsstringLength
(((value: string) => number)
, default:d => d.length
)— detect the size of table cells, used when aligning cellssingleTilde
(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 strikethroughtablePipeAlign
(boolean
, default:true
)— whether to align table pipestableCellPadding
(boolean
, default:true
)— whether to add a space of padding between table pipes and cells
To turn off support for parsing strikethrough with single tildes, passsingleTilde: false
:
// …constfile=awaitunified().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>
It’s possible to align tables based on the visual width of cells.First, let’s show the problem:
import{remark}from'remark'importremarkGfmfrom'remark-gfm'constinput=`| Alpha | Bravo || - | - || 中文 | Charlie || 👩❤️👩 | Delta |`constfile=awaitremark().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 astringLength
function that calculates the visual width of cells.One such algorithm isstring-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|
For bugs present in GFM but not here, or other peculiarities that aresupported, see each corresponding readme:
- autolink literal
- footnote
- strikethrough: n/a
- table
- tasklists: n/a
For recommendations on how to author GFM, see each corresponding readme:
This plugin does not handle how markdown is turned to HTML.Seeremark-rehype
for how that happens and how to change it.
For info on how GitHub styles these features, see each corresponding readme:
For info on the syntax of these features, see each corresponding readme:
For info on the syntax tree of these features, see each corresponding readme:
This package is fully typed withTypeScript.It exports the additional typeOptions
.
The node types are supported in@types/mdast
by default.
Projects maintained by the unified collective are compatible with maintainedversions of Node.js.
When we cut a new major release, we drop support for unmaintained versions ofNode.This means we try to keep the current release line,remark-gfm@^4
, compatiblewith Node.js 16.
This plugin works withremark-parse
version 11+ (remark
version 15+).The previous version (v3) worked withremark-parse
version 10 (remark
version 14).Before that, v2 worked withremark-parse
version 9 (remark
version 13).Earlier versions ofremark-parse
andremark
had agfm
option that enabledthis functionality, which defaulted to true.
Use ofremark-gfm
does not involverehype (hast) or usercontent so there are no openings forcross-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 mathremark-mdx
— support MDX (ESM, JSX, expressions)
Seecontributing.md
inremarkjs/.github
for waysto get started.Seesupport.md
for ways to get help.
This project has acode of conduct.By interacting with this repository, organization, or community you agree toabide by its terms.
About
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)