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.
- popular (world’s most popular markdown parser)
- compliant (100% to CommonMark, 100% to GFM with a plugin)
- plugins (150+ plugins you can pick and choose from)
- ASTs (inspecting and changing content made easy)
remark is a very popular 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
- for more about us, see
unifiedjs.com
- for updates, see Twitter
- for questions, see support
- to help, see contribute or sponsor below
- What is this?
- When should I use this?
- Plugins
- Examples
- Syntax
- Syntax tree
- Types
- Compatibility
- Security
- Contribute
- Sponsor
- License
You can use plugins to turn markdown into HTML. In:
# Hello, *Mercury*!
Out:
<h1>Hello, <em>Mercury</em>!</h1>
You can use plugins to change markdown. In:
# Hi, Saturn!
Plugin:
import {visit} from 'unist-util-visit'
/** @type {import('unified').Plugin<[], import('mdast').Root>} */
function myRemarkPluginToIncreaseHeadings() {
return (tree) => {
visit(tree, (node) => {
if (node.type === 'heading') {
node.depth++
}
})
}
}
Out:
## Hi, Saturn!
You can use remark for many different things. unified is the core project that transforms content with ASTs. remark adds support for markdown to unified. mdast is the markdown AST that remark uses.
This GitHub repository is a monorepo that contains the following packages:
remark-parse
— plugin to take markdown as input and turn it into a syntax tree (mdast)remark-stringify
— plugin to take a syntax tree (mdast) and turn it into markdown as outputremark
— unified,remark-parse
, andremark-stringify
, useful when input and output are markdownremark-cli
— CLI aroundremark
to inspect and format markdown in scripts
If you just want to turn markdown into HTML (with maybe a few extensions),
we recommend micromark
instead.
remark can also do that but it focusses on ASTs and providing an interface for
plugins to transform them.
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
.
remark plugins deal with markdown. Some popular examples are:
remark-gfm
— add support for GFM (GitHub flavored markdown)remark-lint
— inspect markdown and warn about inconsistenciesremark-toc
— generate a table of contentsremark-html
— turn the syntax tree into serialized 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 define other output formats.
You can choose from the 150+ plugins that already exist. Here are three good ways to find plugins:
awesome-remark
— selection of the most awesome projects- List of plugins — list of all plugins
remark-plugin
topic — 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.
remark is an ecosystem around markdown.
A different ecosystem is for HTML: rehype.
The following example turns markdown into HTML by combining both ecosystems with
remark-rehype
:
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeSanitize from 'rehype-sanitize'
import rehypeStringify from 'rehype-stringify'
main()
async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeStringify)
.process('# Hello, Neptune!')
console.log(String(file))
}
Yields:
<h1>Hello, Neptune!</h1>
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 {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
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(remarkFrontmatter)
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeStringify)
.process('---\nlayout: home\n---\n\n# Hi ~~Mars~~Venus!')
console.log(String(file))
}
Yields:
<h1>Hi <del>Mars</del>Venus!</h1>
The following example checks that markdown code style is consistent and follows recommended best practices:
import {reporter} from 'vfile-reporter'
import {remark} from 'remark'
import remarkPresetLintConsistent from 'remark-preset-lint-consistent'
import remarkPresetLintRecommended from 'remark-preset-lint-recommended'
main()
async function main() {
const file = await remark()
.use(remarkPresetLintConsistent)
.use(remarkPresetLintRecommended)
.process('1) Hello, _Jupiter_ and *Neptune*!')
console.error(reporter(file))
}
Yields:
1:1 warning Missing newline character at end of file final-newline remark-lint
1:1-1:35 warning Marker style should be `.` ordered-list-marker-style remark-lint
1:4 warning Incorrect list-item indent: add 1 space list-item-indent remark-lint
1:25-1:34 warning Emphasis should use `_` as a marker emphasis-marker remark-lint
⚠ 4 warnings
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 remark-cli remark-toc remark-preset-lint-consistent remark-preset-lint-recommended --save-dev
Now, add an npm script in your package.json
:
/* … */
"scripts": {
/* … */
"format": "remark . --output",
/* … */
},
/* … */
💡 Tip: add ESLint and such in the
format
script too.
Observe that 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:
/* … */
"remarkConfig": {
"settings": {
"bullet": "*", // Use `*` for list item bullets (default)
// 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 format
remark follows CommonMark, which standardizes the differences between markdown implementations, by default. Some syntax extensions are supported through plugins.
We use micromark
for our parsing.
See its documentation for more information on markdown, CommonMark, and
extensions.
The syntax tree format used in remark is mdast. It represents markdown constructs as JSON objects. In:
## Hello *Pluto*!
Out:
{
type: 'heading',
depth: 2,
children: [
{type: 'text', value: 'Hello '},
{type: 'emphasis', children: [{type: 'text', value: 'Pluto'}]}
{type: 'text', value: '!'}
]
}
The remark organization and the unified collective as a whole is fully typed
with TypeScript.
Types for mdast are available in @types/mdast
.
For TypeScript to work, it is particularly important to type your plugins
correctly.
We strongly recommend using the Plugin
type from unified
with its generics
and to use the node types for the syntax trees provided by @types/mdast
.
/**
* @typedef {import('mdast').Root} Root
*
* @typedef Options
* Configuration (optional).
* @property {boolean} [someField]
* Some option.
*/
// To type options and that the it works with `mdast`:
/** @type {import('unified').Plugin<[Options?], Root>} */
export function myRemarkPluginAcceptingOptions(options) {
// `options` is `Options?`.
return function (tree, file) {
// `tree` is `Root`.
}
}
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.
As markdown can be turned into HTML and improper use of HTML can open you up to
cross-site scripting (XSS) attacks, use of remark can be unsafe.
When going to HTML, you will likely combine remark with rehype, in which
case you should use rehype-sanitize
.
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.
See contributing.md
in remarkjs/.github
for ways
to get started.
See support.md
for ways to get help.
Join us in Discussions to chat with the community and contributors.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
Support this effort and give back by sponsoring on OpenCollective!
Vercel |
Motif |
HashiCorp |
GitBook |
Gatsby |
|||||
Netlify |
Coinbase |
ThemeIsle |
Expo |
Boost Note |
Holloway |
||||
You? |