micromark-extension-gfm

What is micromark-extension-gfm?

The micromark-extension-gfm npm package is an extension for the micromark Markdown parser that adds support for GitHub Flavored Markdown (GFM). This extension enables users to parse and render Markdown text according to the specifications of GFM, which includes several GitHub-specific features such as tables, task lists, and strikethrough.

What are micromark-extension-gfm's main functionalities?

Tables

This feature allows the parsing of tables in Markdown formatted text. The code sample demonstrates how to convert a simple Markdown table into HTML using the micromark parser with the gfmTable extension.

import {micromark} from 'micromark';
import {gfmTable} from 'micromark-extension-gfm-table';

const markdown = '| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1   | Cell 2   |';
const html = micromark(markdown, {extensions: [gfmTable()]});
console.log(html);

Task Lists

This feature supports the rendering of task lists, where tasks can be marked as completed or incomplete. The code sample shows how to convert Markdown task list items into HTML.

import {micromark} from 'micromark';
import {gfmTaskListItem} from 'micromark-extension-gfm-task-list-item';

const markdown = '- [x] Completed task\n- [ ] Incomplete task';
const html = micromark(markdown, {extensions: [gfmTaskListItem()]});
console.log(html);

Strikethrough

This feature enables the use of strikethrough text formatting in Markdown. The code sample illustrates how to parse and convert strikethrough text from Markdown to HTML.

import {micromark} from 'micromark';
import {gfmStrikethrough} from 'micromark-extension-gfm-strikethrough';

const markdown = 'This is ~~strikethrough~~ text.';
const html = micromark(markdown, {extensions: [gfmStrikethrough()]});
console.log(html);

Other packages similar to micromark-extension-gfm

remark-gfm

remark-gfm is another npm package that provides support for GitHub Flavored Markdown. It is built on top of the remark Markdown processor and is similar to micromark-extension-gfm in functionality but uses a different underlying Markdown parsing library.

markdown-it

markdown-it is a Markdown parser that can be extended with plugins, including those for GFM features. It is similar to micromark-extension-gfm but offers a different API and plugin ecosystem, potentially providing more customization options for users.

README

micromark-extension-gfm

micromark extension to support GitHub flavored markdown (GFM).

Contents

• What is this?
• When to use this
• Install
• Use
• API
  • gfm(options?)
  • gfmHtml(htmlOptions?)
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a micromark extension to add support for all GFM features: autolink literals, footnotes, strikethrough, tables, tagfilter, and tasklists.

When to use this

You probably should use this package if you use micromark and want to enable GFM. When working with syntax trees, you’d want to combine this package with mdast-util-gfm.

You can also use the underlying features separately:

• micromark/micromark-extension-gfm-autolink-literal — support GFM autolink literals
• micromark/micromark-extension-gfm-footnote — support GFM footnotes
• micromark/micromark-extension-gfm-strikethrough — support GFM strikethrough
• micromark/micromark-extension-gfm-table — support GFM tables
• micromark/micromark-extension-gfm-tagfilter — support GFM tagfilter
• micromark/micromark-extension-gfm-task-list-item — support GFM tasklists

These tools are all rather low-level. In most cases, you’d instead want to use remark-gfm with remark.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install micromark-extension-gfm

In Deno with Skypack:

import {gfm, gfmHtml} from 'https://cdn.skypack.dev/micromark-extension-gfm@2?dts'

In browsers with Skypack:

<script type="module">
  import {gfm, gfmHtml} from 'https://cdn.skypack.dev/micromark-extension-gfm@2?min'
</script>

Use

Say we have the following file example.md:

# GFM

## Autolink literals

www.example.com, https://example.com, and [e-mail].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tag filter

<plaintext>

## Tasklist

* [ ] to do
* [x] done

And our module example.js looks as follows:

import fs from 'node:fs'
import {micromark} from 'micromark'
import {gfm, gfmHtml} from 'micromark-extension-gfm'

const output = micromark(fs.readFileSync('example.md'), {
  allowDangerousHtml: true,
  extensions: [gfm()],
  htmlExtensions: [gfmHtml()]
})

console.log(output)

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:[e-mail]">[e-mail]</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>Tag filter</h2>
&lt;plaintext>
<h2>Tasklist</h2>
<ul>
<li><input type="checkbox" disabled="" /> to do</li>
<li><input type="checkbox" disabled="" checked="" /> 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>

API

This package exports the following identifiers: gfm, gfmHtml. There is no default export.

This extensions supports the endorsed development condition. Run node --conditions development module.js to get instrumented dev code. Without this condition, production code is loaded.

gfm(options?)

A function that can be called to get an extension for micromark to parse GFM (can be passed in extensions).

options

Configuration (optional).

options.singleTilde

Whether to support strikethrough with a single tilde (boolean, default: true). Single tildes work on github.com, but are technically prohibited by GFM. Passed as singleTilde in micromark-extension-gfm-strikethrough.

gfmHtml(htmlOptions?)

A function that can be called to get an extension to compile GFM to HTML (can be passed in htmlExtensions).

htmlOptions

Configuration (optional).

htmlOptions.clobberPrefix

Prefix to use before the id attribute to prevent it from clobbering attributes (string, default: 'user-content-'). Passed as clobberPrefix in micromark-extension-gfm-footnote.

htmlOptions.label

Label to use for the footnotes section (string, default: 'Footnotes'). Passed as label in micromark-extension-gfm-footnote.

htmlOptions.backLabel

Label to use from backreferences back to their footnote call (string, default: 'Back to content'). Passed as backLabel in micromark-extension-gfm-footnote.

Types

This package is fully typed with TypeScript. It exports additional Options and HtmlOptions types that model their respective interfaces.

Compatibility

This package is at least compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. It also works in Deno and modern browsers.

Security

This package is safe by default.

Related

• syntax-tree/mdast-util-gfm — support GFM in mdast
• remarkjs/remark-gfm — support GFM in remark
• micromark/micromark-extension-gfm-autolink-literal — support GFM autolink literals
• micromark/micromark-extension-gfm-footnote — support GFM footnotes
• micromark/micromark-extension-gfm-strikethrough — support GFM strikethrough
• micromark/micromark-extension-gfm-table — support GFM tables
• micromark/micromark-extension-gfm-tagfilter — support GFM tagfilter
• micromark/micromark-extension-gfm-task-list-item — support GFM tasklists

Contribute

See contributing.md in micromark/.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