Doc/Getting Started
Getting started
See [the monorepo readme][remark] for what the remark ecosystem is and examples
of how to get started.
[remark]: https://github.com/remarkjs/remark
---
Doc/Plugins
![remark][file-logo]
Plugins
remark is a tool that transforms markdown with plugins.
See [the monorepo readme][github-remark] for info on what the remark ecosystem
is.
This page lists existing plugins.
Contents
* List of plugins
* List of utilities
* Use plugins
* Create plugins
List of plugins
<a id="list-of-presets"></a>
For the most awesome projects in the ecosystem,
see [remarkjs/awesome-remark][github-remark-awesome-remark].
More plugins can be found on GitHub tagged with the
[remark-plugin topic][github-topic-remark-plugin].
π Note:
some plugins donβt work with recent versions of remark due to changes in its
underlying parser (micromark).
Plugins that are up to date or unaffected are marked with π’ while pluginsthat are currently broken are marked with β οΈ.π‘ Tip:
remark plugins work with markdown and rehype plugins work with HTML.
See [Β§ List of plugins in rehypejs/rehype][github-rehype-plugins] for moreplugins.
The list of plugins:
* remark-a11y-emoji
β accessible emoji
* β οΈ remark-abbr
β new syntax for abbreviations (new node type, rehype compatible)
* β οΈ remark-admonitions
β new syntax for admonitions
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* β οΈ remark-align
β new syntax to align text or blocks (new node types, rehype
compatible)
* π’ remark-api
β generate an API section
* β οΈ remark-attr
β new syntax to add attributes to markdown
* π’ remark-behead
β increase or decrease heading depth
* π’ remark-breaks
β hard breaks w/o needing spaces (like on issues)
* π’ remark-capitalize
β transform all titles w/ title.sh
* π’ remark-capitalize-headings
β selectively capitalize headings
(π note: alternative to remark-capitalize)
* π’ remark-cite
β new syntax for Pandoc-style citations
* π’ remark-cjk-friendly
β recognize emphasis in CJK languages ββmore reliably
* π’ remark-cjk-friendly-gfm-strikethrough
β recognize GFM strikethrough in CJK languages ββmore reliably
* π’ remark-cloudinary-docusaurus
β allows Docusaurus to use Cloudinary to serve optimised images
* π’ remark-code-blocks
β select and store code blocks
* π’ remark-code-extra
β add to or transform the HTML output of code blocks (rehype compatible)
* π’ remark-code-frontmatter
β extract frontmatter from code blocks
* π’ remark-code-import
β populate code blocks from files
* π’ remark-code-screenshot
β turn code blocks into carbon.now.sh screenshots
* π’ remark-code-title
β add titles to code blocks
* π’ remark-codesandbox
β create CodeSandbox from code blocks
* π’ remark-collapse
β make a section collapsible
* π’ remark-comment-config
β configure remark w/ comments
* β οΈ remark-comments
β new syntax to ignore things
* β οΈ remark-container
β new syntax for containers
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* β οΈ remark-containers
β new syntax for containers
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* π’ remark-contributors
β add a table of contributors
* π’ remark-copy-linked-files
β find and copy files linked files to a destination directory
* π’ remark-corebc
β transforms Core Blockchain notations into markdown links
* π’ remark-corepass
β transform CorePass notations into markdown links
* β οΈ remark-custom-blocks
β new syntax for custom blocks (new node types, rehype compatible)
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* π’ remark-custom-header-id
β add custom ID attribute to headers ({#some-id})
* π’ remark-definition-list
β support definition lists
* π’ remark-defsplit
β change links and images to references w/ separate definitions
* β οΈ remark-disable-tokenizers
β turn some or all remarkβs tokenizers on or off
* π’ remark-directive
β new syntax for directives (generic extensions)
* π’ remark-directive-rehype
β turn [directives][github-remark-directive] into HTML custom elements
(rehype compatible)
* π’ remark-directive-sugar
β predefined directives for customizable badges, links, video embeds, and more
* π’ remark-docx
β compile markdown to docx
* π’ @m2d/remark-docx
β compile markdown to docx with support for GFM, tables, html, and more.
* π’ remark-dropcap
β fancy and accessible drop caps
* π’ remark-embed-images
β embed local images as base64-encoded data URIs
* π’ remark-emoji
β transform Gemoji short-codes to emoji
* π’ remark-extended-table
β extended table syntax allowing colspan / rowspan
* π’ remark-extract-frontmatter
β store front matter in vfiles
* π’ remark-fediverse-user
β transform Fediverse user notations into markdown links
* π’ remark-first-heading
β change the first heading in a document
* π’ remark-fix-guillemets
β support ASCII guillements (<<, >>) mapping them to HTML
* π’ remark-flexible-code-titles
β add titles or/and containers for code blocks with customizable attributes
* π’ remark-flexible-containers
β add custom/flexible containers with customizable properties
* π’ remark-flexible-markers
β add custom/flexible mark element with customizable properties
* π’ remark-flexible-paragraphs
β add custom/flexible paragraphs with customizable properties
* π’ remark-flexible-toc
β expose the table of contents (toc) via Vfile.data or an option reference
* π’ remark-footnotes-extra
β add footnotes via short syntax
* π’ remark-frontmatter
β support frontmatter (yaml, toml, and more)
* π’ remark-gemoji
β better support for Gemoji shortcodes
* β οΈ remark-generic-extensions
β new syntax for the CommonMark generic directive extension
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* π’ remark-gfm
β support GFM (autolink literals, footnotes, strikethrough, tables,
tasklists)
* π’ remark-git-contributors
β add a table of contributors based on Git history, options, and more
* π’ remark-github
β autolink references to commits, issues, pull-requests, and users
* π’ remark-github-admonitions-to-directives
β convert GitHubβs blockquote-based admonitions syntax to directives syntax
* π’ remark-github-beta-blockquote-admonitions
β GitHub beta blockquote-based admonitions
* π’ remark-github-blockquote-alert
β remark plugin to add support for GitHub Alert
* β οΈ remark-grid-tables
β new syntax to describe tables (rehype compatible)
* π’ @adobe/remark-grid-tables
β pandoc compatible grid-table syntax
* π’ remark-heading-id
β custom heading id support {#custom-id}
* π’ remark-heading-gap
β serialize w/ more blank lines between headings
* π’ @vcarl/remark-headings
β extract a list of headings as data
* π’ remark-hexo
β renders Hexo tags
* π’ remark-highlight.js
β highlight code blocks w/
highlight.js
(rehype compatible)
* π’ remark-hint
β add hints/tips/warnings to markdown
* π’ remark-html
β serialize markdown as HTML
* β οΈ remark-iframes
β new syntax to create iframes (new node type, rehype compatible)
* π’ remark-ignore
β use comments to exclude nodes from transformation
* π’ remark-images
β add an improved image syntax
* π’ remark-img-links
β prefix relative image paths with an absolute URL
* π’ @it-service-npm/remark-include
β add ::include{file=path.md} statements to compose markdown files together
* π’ remark-inline-links
β change references and definitions to links and images
* π’ remark-ins
β add ins element for inserted texts opposite to deleted texts
* π’ remark-join-cjk-lines
β remove extra space between CJK Characters.
* β οΈ remark-kbd
β new syntax for keyboard keys (new node type, rehype compatible)
* β οΈ remark-kbd-plus
β new syntax for keyboard keys w/ plusses (new node type, rehype
compatible)
* π’ remark-license
β add a license section
* π’ remark-link-rewrite
β customize link URLs dynamically
* π’ remark-linkify-regex
β change text matching a regex to links
* π’ remark-lint
β check markdown code style
* π’ remark-man
β serialize markdown as man pages (roff)
* π’ remark-math
β new syntax for math (new node types, rehype compatible)
* π’ remark-mdx
β support MDX (JSX, expressions, ESM)
* π’ remark-mentions
β replace @ mentions with links
* π’ remark-merge-data
β merge globally defined data with data declared across code blocks
* π’ remark-mermaidjs
β transform mermaid code blocks into inline SVGs
* π’ remark-message-control
β turn some or all messages on or off
* π’ remark-normalize-headings
β make sure at most one top-level heading exists
* π’ remark-numbered-footnote-labels
β label footnotes w/ numbers
* π’ @agentofuser/remark-oembed
β transform URLs for youtube, twitter, etc. embeds
* π’ remark-oembed
β transform URLs surrounded by newlines into asynchronously loading
embeds
* π’ remark-package-dependencies
β inject your dependencies
* β οΈ remark-parse-yaml
β parse YAML nodes and expose their value as parsedValue
* π’ remark-pdf
β compile markdown to pdf
* β οΈ remark-ping
β new syntax for mentions w/ configurable existence check (new node
type, rehype compatible)
* π’ remark-plugin-autonbsp
β replace whitespace with non-breaking spaces
to avoid hanging articles, prepositions and digits
* π’ remark-prepend-url
β prepend an absolute url to relative links
* π’ remark-prettier
β check and format markdown using Prettier
* π’ remark-prism
β highlight code blocks w/ Prism (supporting most
Prism plugins)
* π’ @handlewithcare/remark-prosemirror
β compile markdown to ProseMirror documents
* β οΈ remark-redact
β new syntax to conceal text matching a regex
* π’ remark-redactable
β write plugins to redact content from a markdown document,
then restore it later
* π’ remark-refer-plantuml
β automatically transform PlantUML code into referenced embeddable image URLs
* π’ remark-reference-links
β transform links and images into references and definitions
* π’ remark-rehype
β transform to rehype
* π’ remark-relative-links
β change absolute URLs to relative ones
* π’ remark-remove-comments
β remove HTML comments from the processed output
* π’ remark-remove-unused-definitions
β remove unused reference-style link definitions
* π’ remark-remove-url-trailing-slash
β remove trailing slashes from the ends of all URL paths
* π’ remark-renumber-references
β renumber numeric reference-style link ids contiguously starting from 1
* π’ remark-retext
β transform to retext
* π’ remark-ruby
β new syntax for ruby (furigana)
* π’ remark-sectionize
β wrap headings and subsequent content in section tags (new node type,
rehype compatible)
* β οΈ remark-shortcodes
β new syntax for Wordpress- and Hugo-like shortcodes (new node type)
(π note: [remark-directive][github-remark-directive] is similar and up
to date)
* π’ remark-simple-plantuml
β turn PlantUML code blocks to images
* π’ remark-slate
β compile markdown to Slate nodes
* π’ remark-slate-transformer
β compile markdown to
Slate nodes
and Slate nodes to markdown
* π’ remark-smartypants
β SmartyPants
* π’ remark-smcat
β state machine cat
* π’ remark-sort-definitions
β reorder reference-style link definitions
* π’ remark-sources
β insert source code
* π’ remark-strip-badges
β remove badges (such as shields.io)
* π’ remark-strip-html
β remove HTML
* π’ remark-squeeze-paragraphs
β remove empty paragraphs
* β οΈ remark-sub-super
β new syntax for super- and subscript (new node types, rehype
compatible)
* β οΈ remark-terms
β new customizable syntax for special terms and phrases
* π’ remark-textr
β transform text w/ Textr
* π’ remark-tight-comments
β selectively remove newlines around comments
* π’ remark-title
β check and add the document title
* π’ remark-toc
β add a table of contents
* π’ remark-torchlight
β syntax highlighting powered by torchlight.dev
* π’ remark-tree-sitter
β highlight code blocks in markdown files using
Tree-sitter
(rehype compatible)
* π’ remark-truncate-links
β truncate/shorten urls not manually named
* π’ remark-twemoji
β turn emoji into Twemoji
* π’ remark-typedoc-symbol-links
β turn Typedoc symbol link expressions into markdown links
* π’ remark-typescript
β turn TypeScript code to JavaScript
* π’ remark-typograf
β transform text w/ Typograf
* π’ remark-unlink
β remove all links, references, and definitions
* π’ remark-usage
β add a usage example
* π’ remark-utf8
β turn bolds, italics, and code into UTF 8 special characters
* π’ remark-validate-links
β check links to headings and files
* β οΈ remark-variables
β new syntax for variables
* π’ remark-vdom
β compile markdown to VDOM
* π’ remark-wiki-link
β new syntax for wiki links (rehype compatible)
* π’ remark-yaml-config
β configure remark w/ YAML
List of utilities
For things that work with the syntax tree used in remark for markdown,
see [Β§ List of utilities in syntax-tree/mdast][github-mdast-utilities].
For tools that work with mdast and other syntax trees,
see [Β§ List of utilities in syntax-tree/unist][github-unist-utilities].
For tools that work with the virtual file format used in remark,
see [Β§ List of utilities in vfile/vfile][github-vfile-utilities].
Use plugins
To use a plugin programmatically (from JavaScript),
call the [use()][github-unified-use] method.
To use plugin with remark-cli (from the terminal),
pass a [--use flag][github-unified-args-use] or
specify it in a
[configuration file][github-unified-engine-config-files].
Create plugins
To create a plugin,
first read up on what they are in
[Β§ Plugin in unifiedjs/unified][github-unified-plugin].
After that read
[Β§ Create a remark plugin on unifiedjs.com][unifiedjs-create-a-plugin]
for a practical introduction.
Finally take one of the existing plugins,
which looks similar to what youβre about to make,
and work from there.
If you get stuck,
[discussions][health-discussions] is a good place to get help.
You should pick a name prefixed by remark- (such as remark-lint).
Do not use the remark- prefix if the thing you create doesnβt work withremark().use():
it isnβt a βpluginβ and will confuse users.
If it works with mdast use mdast-util-.
If it works with any unist tree use unist-util-.
If it works with virtual files use vfile-.
Use default exports to expose plugins from your packages.
Add remark-plugin keywords in package.json.
Add a remark-plugin topic to your repo on GitHub.
Create a pull request to add the plugin here on this page!
[file-logo]: https://raw.githubusercontent.com/remarkjs/remark/1f338e72/logo.svg?sanitize=true
[github-mdast-utilities]: https://github.com/syntax-tree/mdast#list-of-utilities
[github-rehype-plugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
[github-remark]: https://github.com/remarkjs/remark
[github-remark-awesome-remark]: https://github.com/remarkjs/awesome-remark
[github-remark-directive]: https://github.com/remarkjs/remark-directive
[github-topic-remark-plugin]: https://github.com/topics/remark-plugin
[github-unified-args-use]: https://github.com/unifiedjs/unified-args#--use-plugin
[github-unified-engine-config-files]: https://github.com/unifiedjs/unified-engine#config-files
[github-unified-plugin]: https://github.com/unifiedjs/unified#plugin
[github-unified-use]: https://github.com/unifiedjs/unified#processoruseplugin-options
[github-unist-utilities]: https://github.com/syntax-tree/unist#unist-utilities
[github-vfile-utilities]: https://github.com/vfile/vfile#list-of-utilities
[health-discussions]: https://github.com/remarkjs/remark/discussions
[unifiedjs-create-a-plugin]: https://unifiedjs.com/learn/guide/create-a-remark-plugin/
---
Doc/Products
Products
See [awesome remark][awesome] for the products using remark.
[awesome]: https://github.com/remarkjs/awesome
---
Changelog
Changelog
See [GitHub Releases][releases] for the changelog.
[releases]: https://github.com/remarkjs/remark/releases
---
Readme
![remark][file-logo]
[![Build][badge-build-image]][badge-build-url]
[![Coverage][badge-coverage-image]][badge-coverage-url]
[![Downloads][badge-downloads-image]][badge-downloads-url]
[![Size][badge-size-image]][badge-size-url]
remark is a tool that transforms markdown with plugins.
These plugins can inspect and change your markup.
You can use remark on the server,
the client,
CLIs,
deno,
etc.
Feature highlights
* [x] [compliant][section-syntax]
β 100% to CommonMark,
100% to GFM or MDX with a plugin
* [x] [ASTs][section-syntax-tree]
β inspecting and changing content made easy
* [x] [popular][]
β worldβs most popular markdown parser
* [x] [plugins][section-plugins]
β 150+ plugins you can pick and choose from
Intro
remark is an ecosystem of plugins that work with markdown as structured data,
specifically ASTs (abstract syntax trees).
ASTs make it easy for programs to deal with markdown.
We call those programs plugins.
Plugins inspect and change trees.
You can use the many existing plugins or you can make your own.
* to learn markdown,
see this [cheatsheet and tutorial][commonmark-help]
* for more about us,
see [unifiedjs.com][unifiedjs]
* for questions,
see [support][health-support]
* to help,
see [contribute][section-contribute] or [sponsor][section-sponsor] below
Contents
* What is this?
* When should I use this?
* Plugins
* Examples
* Example: turning markdown into HTML
* Example: support for GFM and frontmatter
* Example: checking markdown
* Example: checking and formatting markdown on the CLI
* Syntax
* Syntax tree
* Types
* Compatibility
* Security
* Contribute
* Sponsor
* License
What is this?
With this project and a plugin,
you can turn this markdown:
Hello, Mercury!
β¦into the following HTML:
<h1>Hello, <em>Mercury</em>!</h1><details><summary>Show example code</summary>
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeStringify)
.process('# Hello, Mercury!')
console.log(String(file)) // => '<h1>Hello, <em>Mercury</em>!</h1>'
</details>
With another plugin,
you can turn this markdown:
Hi, Saturn!
β¦into the following markdown:
Hi, Saturn!
<details><summary>Show example code</summary>
/
* @import {Root} from 'mdast'
*/import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import {unified} from 'unified'
import {visit} from 'unist-util-visit'
const file = await unified()
.use(remarkParse)
.use(myRemarkPluginToIncreaseHeadings)
.use(remarkStringify)
.process('# Hi, Saturn!')
console.log(String(file)) // => '## Hi, Saturn!'
function myRemarkPluginToIncreaseHeadings() {
/
* @param {Root} tree
*/
return function (tree) {
visit(tree, function (node) {
if (node.type === 'heading') {
node.depth++
}
})
}
}
</details>
You can use remark for many different things.
[unified][github-unified] is the core project that transforms content with
ASTs.
remark adds support for markdown to unified.
[mdast][github-mdast] is the markdown AST that remark uses.
This GitHub repository is a monorepo that contains the following packages:
* [remark-parse][github-remark-parse]
β plugin to take markdown as input and turn it into a syntax tree (mdast)
* [remark-stringify][github-remark-stringify]
β plugin to take a syntax tree (mdast) and turn it into markdown as output
* [remark][github-remark-core]
β unified, remark-parse, and remark-stringify,
useful when input and output are markdown
* [remark-cli][github-remark-cli]
β CLI around remark to inspect and format markdown in scripts
When should I use this?
Depending on the input you have and output you want,
you can use different parts of remark.
If the input is markdown,
you can use remark-parse with unified.
If the output is markdown,
you can use remark-stringify with unified.
If both the input and output are markdown,
you can use remark on its own.
When you want to inspect and format markdown files in a project,
you can use remark-cli.
If you just want to turn markdown into HTML (with maybe a few extensions),
we recommend [micromark][github-micromark] instead.
If you donβt use plugins and want to deal with syntax trees manually,
you can use [mdast-util-from-markdown][github-mdast-util-from-markdown] and
[mdast-util-to-markdown][github-mdast-util-to-markdown].
Plugins
remark plugins deal with markdown.
Some popular examples are:
* [remark-gfm][github-remark-gfm]
β add support for GFM (GitHub flavored markdown)
* [remark-lint][github-remark-lint]
β inspect markdown and warn about inconsistencies
* [remark-toc][github-remark-toc]
β generate a table of contents
* [remark-rehype][github-remark-rehype]
β turn markdown into HTML
These plugins are exemplary because what they do and how they do it is quite
different,
respectively to extend markdown syntax,
inspect trees,
change trees,
and transform to other syntax trees.
You can choose from the 150+ plugins that already exist.
Here are three good ways to find plugins:
* [awesome-remark][github-awesome-remark]
β selection of the most awesome projects
* [List of plugins][file-list-of-plugins]
β list of all plugins
* [remark-plugin topic][github-topic-remark-plugin]
β any tagged repo on GitHub
Some plugins are maintained by us here in the @remarkjs organization while
others are maintained by folks elsewhere.
Anyone can make remark plugins,
so as always when choosing whether to include
dependencies in your project,
make sure to carefully assess the quality of remark plugins too.
Examples
Example: turning markdown into HTML
remark is an ecosystem around markdown.
A different ecosystem is for HTML:
[rehype][github-rehype].
The following example turns markdown into HTML by combining both ecosystems with
[remark-rehype][github-remark-rehype]:
import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeStringify)
.process('# Hello, Neptune!')
console.log(String(file))
Yields:
<h1>Hello, Neptune!</h1>Example: support for GFM and frontmatter
remark supports CommonMark by default.
Non-standard markdown extensions can be enabled with plugins.
The following example adds support for GFM
(autolink literals, footnotes, strikethrough, tables, tasklists)
and frontmatter (YAML):
import rehypeStringify from 'rehype-stringify'
import remarkFrontmatter from 'remark-frontmatter'
import remarkGfm from 'remark-gfm'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import {unified} from 'unified'const value =
---
layout: solar-system
---Hi ~~Mars~~Venus!
const file = await unified()
.use(remarkParse)
.use(remarkFrontmatter)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeStringify)
.process(value)console.log(String(file))
Yields:
<h1>Hi <del>Mars</del>Venus!</h1>Example: checking markdown
The following example checks that markdown code style is consistent and follows
recommended best practices:
import {remark} from 'remark'
import remarkPresetLintConsistent from 'remark-preset-lint-consistent'
import remarkPresetLintRecommended from 'remark-preset-lint-recommended'
import {reporter} from 'vfile-reporter'const file = await remark()
.use(remarkPresetLintConsistent)
.use(remarkPresetLintRecommended)
.process('1) Hello, _Jupiter_ and Neptune!')
console.error(reporter(file))
Yields:
1:2 warning Unexpected ordered list marker ), expected . ordered-list-marker-style remark-lint
1:25-1:34 warning Unexpected emphasis marker *, expected _ emphasis-marker remark-lint
[cause]:
1:11-1:20 info Emphasis marker style '_' first defined for 'consistent' here emphasis-marker remark-lint
1:35 warning Unexpected missing final newline character, expected line feed (\n) at end of file final-newline remark-lintβ 3 warnings
Example: checking and formatting markdown on the CLI
The following example checks and formats markdown with remark-cli,
which is the CLI (command line interface) of remark that you can use in your
terminal.
This example assumes youβre in a Node.js package.
First,
install the CLI and plugins:
npm install --save-dev remark-cli remark-preset-lint-consistent remark-preset-lint-recommended remark-tocβ¦then add an npm script in your package.json:
/ β¦ /
"scripts": {
/ β¦ /
"format": "remark . --output",
/ β¦ /
},
/ β¦ /π‘ Tip:
add ESLint and such in the format script too.The above change adds a format script,
which can be run with npm run format.
It runs remark on all markdown files (.) and rewrites them (--output).
Run ./node_modules/.bin/remark --help for more info on the CLI.
Then,
add a remarkConfig to your package.json to configure remark:
/ β¦ /for list item bullets (default)
"remarkConfig": {
"settings": {
"bullet": "", // Use
// See <https://github.com/remarkjs/remark/tree/main/packages/remark-stringify> for more options.
},
"plugins": [
"remark-preset-lint-consistent", // Check that markdown is consistent.
"remark-preset-lint-recommended", // Few recommended rules.
[
// Generate a table of contents in## Contents
"remark-toc",
{
"heading": "contents"
}
]
]
},
/ β¦ /
π Note:
you must remove the comments in the above examples when copy/pasting them as
comments are not supported in package.json files.Finally,
you can run the npm script to check and format markdown files in your project:
npm run formatSyntax
Markdown is parsed and serialized according to CommonMark.
Other plugins can add support for syntax extensions.
We use [micromark][github-micromark] for our parsing.
See its documentation for more information on markdown,
CommonMark,
and extensions.
Syntax tree
The syntax tree used in remark is [mdast][github-mdast].
It represents markdown constructs as JSON objects.
This markdown:
Hello Pluto!
β¦yields the following tree (positional info remove for brevity):
{
type: 'heading',
depth: 2,
children: [
{type: 'text', value: 'Hello '},
{type: 'emphasis', children: [{type: 'text', value: 'Pluto'}]}
{type: 'text', value: '!'}
]
}Types
The remark organization and the unified collective as a whole is fully typed
with [TypeScript][].
Types for mdast are available in [@types/mdast][github-types-mdast].
For TypeScript to work,
it is important to type your plugins.
For example:
/
* @import {Root} from 'mdast'
* @import {VFile} from 'vfile'
*//
* @typedef Options
* Configuration.
* @property {boolean | null | undefined} [someField]
* Some option (optional).
*/
/
* My plugin.
*
* @param {Options | null | undefined} [options]
* Configuration (optional).
* @returns
* Transform.
*/
export function myRemarkPluginAcceptingOptions(options) {
/
* Transform.
*
* @param {Root} tree
* Tree.
* @param {VFile} file
* File
* @returns {undefined}
* Nothing.
*/
return function (tree, file) {
// Do things.
}
}
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 compatible with Node.js 16.
Security
As markdown can be turned into HTML and improper use of HTML can open you up to
[cross-site scripting (XSS)][wikipedia-xss] attacks,
use of remark can be unsafe.
When going to HTML,
you will combine remark with [rehype][github-rehype],
in which case you should use [rehype-sanitize][github-rehype-sanitize].
Another security aspect is DDoS attacks.
An attacker could cause a crash or slow down with big files.
Crashes can also originate from smaller payloads,
often when thousands of things (such as lists or links) are opened.
It is wise to cap the accepted size of input
(500kb can hold a big book)
and to process content in a different thread or worker so that it can be
stopped when needed.
Use of remark plugins could also open you up to other attacks.
Carefully assess each plugin and the risks involved in using them.
For info on how to submit a report,
see our [security policy][health-security].
Contribute
See [contributing.md][health-contributing] in [remarkjs/.github][health]
for ways to get started.
See [support.md][health-support] for ways to get help.
This project has a [code of conduct][health-coc].
By interacting with this repository,
organization,
or community you agree to abide by its terms.
Sponsor
Support this effort and give back by sponsoring on [OpenCollective][]!
<table>
<tr valign="middle">
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://vercel.com">Vercel</a><br><br>
<a href="https://vercel.com"><img src="https://avatars1.githubusercontent.com/u/14985020?s=256&v=4" width="128"></a>
</td>
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://motif.land">Motif</a><br><br>
<a href="https://motif.land"><img src="https://avatars1.githubusercontent.com/u/74457950?s=256&v=4" width="128"></a>
</td>
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://www.hashicorp.com">HashiCorp</a><br><br>
<a href="https://www.hashicorp.com"><img src="https://avatars1.githubusercontent.com/u/761456?s=256&v=4" width="128"></a>
</td>
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://www.gitbook.com">GitBook</a><br><br>
<a href="https://www.gitbook.com"><img src="https://avatars1.githubusercontent.com/u/7111340?s=256&v=4" width="128"></a>
</td>
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://www.gatsbyjs.org">Gatsby</a><br><br>
<a href="https://www.gatsbyjs.org"><img src="https://avatars1.githubusercontent.com/u/12551863?s=256&v=4" width="128"></a>
</td>
</tr>
<tr valign="middle">
</tr>
<tr valign="middle">
<td width="20%" align="center" rowspan="2" colspan="2">
<a href="https://www.netlify.com">Netlify</a><br><br>
<a href="https://www.netlify.com"><img src="https://images.opencollective.com/netlify/4087de2/logo/256.png" width="128"></a>
</td>
<td width="10%" align="center">
<a href="https://www.coinbase.com">Coinbase</a><br><br>
<a href="https://www.coinbase.com"><img src="https://avatars1.githubusercontent.com/u/1885080?s=256&v=4" width="64"></a>
</td>
<td width="10%" align="center">
<a href="https://themeisle.com">ThemeIsle</a><br><br>
<a href="https://themeisle.com"><img src="https://avatars1.githubusercontent.com/u/58979018?s=128&v=4" width="64"></a>
</td>
<td width="10%" align="center">
<a href="https://expo.io">Expo</a><br><br>
<a href="https://expo.io"><img src="https://avatars1.githubusercontent.com/u/12504344?s=128&v=4" width="64"></a>
</td>
<td width="10%" align="center">
<a href="https://boostnote.io">Boost Note</a><br><br>
<a href="https://boostnote.io"><img src="https://images.opencollective.com/boosthub/6318083/logo/128.png" width="64"></a>
</td>
<td width="10%" align="center">
<a href="https://markdown.space">Markdown Space</a><br><br>
<a href="https://markdown.space"><img src="https://images.opencollective.com/markdown-space/e1038ed/logo/128.png" width="64"></a>
</td>
<td width="10%" align="center">
<a href="https://www.holloway.com">Holloway</a><br><br>
<a href="https://www.holloway.com"><img src="https://avatars1.githubusercontent.com/u/35904294?s=128&v=4" width="64"></a>
</td>
<td width="10%"></td>
<td width="10%"></td>
</tr>
<tr valign="middle">
<td width="100%" align="center" colspan="8">
<br>
<a href="https://opencollective.com/unified"><strong>You?</strong></a>
<br><br>
</td>
</tr>
</table>
License
MIT Β© Titus Wormer
[badge-build-image]: https://github.com/remarkjs/remark/workflows/main/badge.svg
[badge-build-url]: https://github.com/remarkjs/remark/actions
[badge-coverage-image]: https://img.shields.io/codecov/c/github/remarkjs/remark.svg
[badge-coverage-url]: https://codecov.io/github/remarkjs/remark
[badge-downloads-image]: https://img.shields.io/npm/dm/remark.svg
[badge-downloads-url]: https://www.npmjs.com/package/remark
[badge-size-image]: https://img.shields.io/bundlejs/size/remark
[badge-size-url]: https://bundlejs.com/?q=remark
[commonmark-help]: https://commonmark.org/help/
[file-list-of-plugins]: doc/plugins.md#list-of-plugins
[file-logo]: https://raw.githubusercontent.com/remarkjs/remark/1f338e72/logo.svg?sanitize=true
[github-awesome-remark]: https://github.com/remarkjs/awesome-remark
[github-mdast]: https://github.com/syntax-tree/mdast
[github-mdast-util-from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
[github-mdast-util-to-markdown]: https://github.com/syntax-tree/mdast-util-to-markdown
[github-micromark]: https://github.com/micromark/micromark
[github-rehype]: https://github.com/rehypejs/rehype
[github-rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize
[github-remark-cli]: https://github.com/remarkjs/remark/tree/main/packages/remark-cli
[github-remark-core]: https://github.com/remarkjs/remark/tree/main/packages/remark
[github-remark-gfm]: https://github.com/remarkjs/remark-gfm
[github-remark-lint]: https://github.com/remarkjs/remark-lint
[github-remark-parse]: https://github.com/remarkjs/remark/tree/main/packages/remark-parse
[github-remark-rehype]: https://github.com/remarkjs/remark-rehype
[github-remark-stringify]: packages/remark-stringify/
[github-remark-toc]: https://github.com/remarkjs/remark-toc
[github-topic-remark-plugin]: https://github.com/topics/remark-plugin
[github-types-mdast]: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/mdast
[github-unified]: https://github.com/unifiedjs/unified
[health]: https://github.com/remarkjs/.github
[health-coc]: https://github.com/remarkjs/.github/blob/main/code-of-conduct.md
[health-contributing]: https://github.com/remarkjs/.github/blob/main/contributing.md
[health-security]: https://github.com/remarkjs/.github/blob/main/security.md
[health-support]: https://github.com/remarkjs/.github/blob/main/support.md
[opencollective]: https://opencollective.com/unified
[popular]: https://www.npmtrends.com/remark-parse-vs-marked-vs-micromark-vs-markdown-it
[section-contribute]: #contribute
[section-plugins]: #plugins
[section-sponsor]: #sponsor
[section-syntax]: #syntax
[section-syntax-tree]: #syntax-tree
[typescript]: https://www.typescriptlang.org
[unifiedjs]: https://unifiedjs.com
[wikipedia-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
---