All Projects → remarkjs → Remark

remarkjs / Remark

Licence: mit
remark is a popular 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.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Remark

Micromark
the smallest commonmark compliant markdown parser that exists; new basis for @unifiedjs (hundreds of projects w/ billions of downloads for dealing w/ content)
Stars: ✭ 793 (-83.29%)
Mutual labels:  ast, markdown, unified, commonmark
Down
Blazing fast Markdown / CommonMark rendering in Swift, built upon cmark.
Stars: ✭ 1,895 (-60.07%)
Mutual labels:  ast, markdown, commonmark
React Markdown
Markdown component for React
Stars: ✭ 8,047 (+69.55%)
Mutual labels:  markdown, commonmark, remark
Elm Markdown
Pure Elm markdown parsing and rendering
Stars: ✭ 96 (-97.98%)
Mutual labels:  ast, markdown, commonmark
Mdx
Markdown for the component era
Stars: ✭ 11,948 (+151.75%)
Mutual labels:  markdown, unified, remark
Rehype
HTML processor powered by plugins part of the @unifiedjs collective
Stars: ✭ 634 (-86.64%)
Mutual labels:  ast, unified
Prettier
Prettier is an opinionated code formatter.
Stars: ✭ 41,411 (+772.55%)
Mutual labels:  ast, markdown
Retext
natural language processor powered by plugins part of the @unifiedjs collective
Stars: ✭ 2,119 (-55.35%)
Mutual labels:  ast, unified
remark-slate-transformer
remark plugin to transform remark syntax tree (mdast) to Slate document tree, and vice versa. Made for WYSIWYG markdown editor.
Stars: ✭ 62 (-98.69%)
Mutual labels:  remark, unified
Orgajs
parse org-mode content into AST
Stars: ✭ 417 (-91.21%)
Mutual labels:  ast, unified
rehype-dom
HTML processor to parse and compile with browser APIs, powered by plugins
Stars: ✭ 20 (-99.58%)
Mutual labels:  ast, unified
redot
Graphviz dot file processor powered by plugins based on @unifiedjs
Stars: ✭ 60 (-98.74%)
Mutual labels:  ast, unified
awesome-remark
Curated list of awesome remark resources
Stars: ✭ 186 (-96.08%)
Mutual labels:  remark, unified
react-remark
React component and hook to use remark to render markdown
Stars: ✭ 81 (-98.29%)
Mutual labels:  remark, unified
slackify-markdown
Convert markdown into Slack-specific markdown
Stars: ✭ 80 (-98.31%)
Mutual labels:  remark, unified
Mdast
Markdown Abstract Syntax Tree format
Stars: ✭ 493 (-89.61%)
Mutual labels:  ast, markdown
gram-js
Gram in javascript.
Stars: ✭ 21 (-99.56%)
Mutual labels:  ast, unified
Markdown Writer Fx
Markdown Writer FX
Stars: ✭ 323 (-93.19%)
Mutual labels:  markdown, commonmark
Markdownlint
A Node.js style checker and lint tool for Markdown/CommonMark files.
Stars: ✭ 2,828 (-40.41%)
Mutual labels:  markdown, commonmark
Lute
🎼 一款对中文语境优化的 Markdown 引擎,支持 Go 和 JavaScript。A structured Markdown engine that supports Go and JavaScript.
Stars: ✭ 222 (-95.32%)
Mutual labels:  markdown, commonmark

remark

Build Coverage Downloads Size Sponsors Backers Chat

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

  • 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)

Intro

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.

Contents

What is this?

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 output
  • remark — unified, remark-parse, and remark-stringify, useful when input and output are markdown
  • remark-cli — CLI around remark to inspect and format markdown in scripts

When should I use this?

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.

Plugins

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 inconsistencies
  • remark-toc — generate a table of contents
  • remark-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:

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

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 {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>

Example: checking markdown

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

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

Syntax

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.

Syntax tree

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: '!'}
  ]
}

Types

The remark organization and the unified collective as a whole is fully typed with TypeScript. Types for mdast are available in @types/mdast.

Compatibility

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.

Security

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.

Contribute

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.

Sponsor

Support this effort and give back by sponsoring on OpenCollective!

Vercel

Motif

HashiCorp

Gatsby

Netlify

Coinbase

ThemeIsle

Expo

Boost Hub

Holloway


You?

License

MIT © Titus Wormer

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].