Show example of needed change
Before (**broken**): ```jsShow conversion table
| Type (`renderers`) | Tag names (`components`) | | ----------------------------------- | --------------------------------------- | | `blockquote` | `blockquote` | | `break` | `br` | | `code`, `inlineCode` | `code`, `pre`**\*** | | `definition` | **†** | | `delete` | `del`**‡** | | `emphasis` | `em` | | `heading` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6`**§** | | `html`, `parsedHtml`, `virtualHtml` | **‖** | | `image`, `imageReference` | `img`**†** | | `link`, `linkReference` | `a`**†** | | `list` | `ol`, `ul`**¶** | | `listItem` | `li` | | `paragraph` | `p` | | `root` | **\*\*** | | `strong` | `strong` | | `table` | `table`**‡** | | `tableHead` | `thead`**‡** | | `tableBody` | `tbody`**‡** | | `tableRow` | `tr`**‡** | | `tableCell` | `td`, `th`**‡** | | `text` | | | `thematicBreak` | `hr` | * **\*** It’s possible to differentiate between code based on the `inline` prop. Block code is also wrapped in a `pre` * **†** Resource (`[text](url)`) and reference (`[text][id]`) style links and images (and their definitions) are now resolved and treated the same * **‡** Available when using [`remark-gfm`](https://github.com/remarkjs/remark-gfm) * **§** It’s possible to differentiate between heading based on the `level` prop * **‖** When using `rehype-raw` (see below), components for those elements can also be used (for example, `abbr` for `HTML`) * **¶** It’s possible to differentiate between lists based on the `ordered` prop * **\*\*** Wrap `ReactMarkdown` in a component insteadShow example of feature
```js import rehypeHighlight from 'rehype-highlight'Show example of needed change
Before (**broken**): ```js import MarkdownWithHtml from 'react-markdown/with-html'Show example of needed change
Before (**broken**): ```jsShow example of needed change
Before (**broken**): ```jsShow example of needed change
Before (**broken**): ```js` not having a node key (Alex Zaworski) ## 2.5.0 - 2017-04-10 ### Changes * Fix deprecations for React v15.5 (Renée Kooi) ## 2.4.6 - 2017-03-14 ### Changes * Fix too strict TypeScript definition (Rasmus Eneman) * Update JSON-loader info in readme to match webpack 2 (Robin Wieruch) ### Added * Add ability to pass options to the CommonMark parser (Evan Hensleigh) ## 2.4.4 - 2017-01-16 ### Changes * Fixed TypeScript definitions (Kohei Asai) ## 2.4.3 - 2017-01-12 ### Added * Added TypeScript definitions (Ibragimov Ruslan) ## 2.4.2 - 2016-07-09 ### Added * Added UMD-build (`umd/react-markdown.js`) (Espen Hovlandsdal) ## 2.4.1 - 2016-07-09 ### Changes * Update `commonmark-react-renderer`, fixing a bug with missing nodes (Espen Hovlandsdal) ## 2.4.0 - 2016-07-09 ### Changes * Plain DOM-node renderers are now given only their respective props. Fixes warnings when using React >= 15.2 (Espen Hovlandsdal) ### Added * New `transformImageUri` option allows you to transform URIs for images (Petri Lehtinen) ## 2.3.0 - 2016-06-06 ## Added * The `walker` instance is now passed to the `walker` callback function (Riku Rouvila) ## 2.2.0 - 2016-04-20 * Add `childBefore`/`childAfter` options (Thomas Lindstrøm) ## 2.1.1 - 2016-03-25 * Add `containerProps` option (Thomas Lindstrøm) ## 2.1.0 - 2016-03-12 ### Changes * Join sibling text nodes into one text node (Espen Hovlandsdal) ## 2.0.1 - 2016-02-21 ### Changed * Update `commonmark-react-renderer` dependency to latest version to add keys to all elements and simplify custom renderers ## 2.0.0 - 2016-02-21 ### Changed * **Breaking change**: The renderer now requires Node 0.14 or higher. This is because the renderer uses stateless components internally. * **Breaking change**: `allowNode` now receives different properties in the options argument. See `README.md` for more details. * **Breaking change**: CommonMark has changed some type names. `Html` is now `HtmlInline`, `Header` is now `Heading` and `HorizontalRule` is now `ThematicBreak`. This affects the `allowedTypes` and `disallowedTypes` options. * **Breaking change**: A bug in the `allowedTypes`/`disallowedTypes` and `allowNode` options made them only applicable to certain types. In this version, all types are filtered, as expected. * **Breaking change**: Link URIs are now filtered through an XSS-filter by default, prefixing “dangerous” protocols such as `javascript:` with `x-` (eg: `javascript:alert('foo')` turns into `x-javascript:alert('foo')`). This can be overridden with the `transformLinkUri`-option. Pass `null` to disable the feature or a custom function to replace the built-in behaviour. ### Added * New `renderers` option allows you to customize which React component should be used for rendering given types. See `README.md` for more details. (Espen Hovlandsdal / Guillaume Plique) * New `unwrapDisallowed` option allows you to select if the contents of a disallowed node should be “unwrapped” (placed into the disallowed node position). For instance, setting this option to true and disallowing a link would still render the text of the link, instead of the whole link node and all it’s children disappearing. (Espen Hovlandsdal) * New `transformLinkUri` option allows you to transform URIs in links. By default, an XSS-filter is used, but you could also use this for use cases like transforming absolute to relative URLs, or similar. (Espen Hovlandsdal) ## 1.2.4 - 2016-01-28 ### Changed * Rolled back dependencies because of breaking changes ## 1.2.3 - 2016-01-24 ### Changed * Updated dependencies for both `commonmark` and `commonmark-react-parser` to work around an embarrassing oversight on my part. ## 1.2.2 - 2016-01-08 ### Changed * Reverted change from 1.2.1 that uses the dist version. Instead, documentation is added that specified the need for `json-loader` to be enabled when using webpack. ## 1.2.1 - 2015-12-29 ### Fixed * Use pre-built (dist version) of commonmark renderer in order to work around JSON-loader dependency. ## 1.2.0 - 2015-12-16 ### Added * Added new `allowNode`-property. See README for details. ## 1.1.4 - 2015-12-14 ### Fixed * Set correct `libraryTarget` to make UMD builds work as expected ## 1.1.3 - 2015-12-14 ### Fixed * Update babel dependencies and run prepublish only as actual prepublish, not install ## 1.1.1 - 2015-11-28 ### Fixed * Fixed issue with React external name in global environment (`react` vs `React`) ## 1.1.0 - 2015-11-22 ### Changed * Add ability to allow/disallow specific node types (`allowedTypes`/`disallowedTypes`) ## 1.0.5 - 2015-10-22 ### Changed * Moved React from dependency to peer dependency. ================================================ FILE: index.js ================================================ /** * @typedef {import('./lib/index.js').AllowElement} AllowElement * @typedef {import('./lib/index.js').Components} Components * @typedef {import('./lib/index.js').ExtraProps} ExtraProps * @typedef {import('./lib/index.js').HooksOptions} HooksOptions * @typedef {import('./lib/index.js').Options} Options * @typedef {import('./lib/index.js').UrlTransform} UrlTransform */ export { MarkdownAsync, MarkdownHooks, Markdown as default, defaultUrlTransform } from './lib/index.js' ================================================ FILE: lib/index.js ================================================ /** * @import {Element, Nodes, Parents, Root} from 'hast' * @import {Root as MdastRoot} from 'mdast' * @import {ComponentType, JSX, ReactElement, ReactNode} from 'react' * @import {Options as RemarkRehypeOptions} from 'remark-rehype' * @import {BuildVisitor} from 'unist-util-visit' * @import {PluggableList, Processor} from 'unified' */ /** * @callback AllowElement * Filter elements. * @param {Readonly
` for `## hi`)
* [x] **[plugins][section-plugins]**
(many plugins you can pick and choose from)
* [x] **[compliant][section-syntax]**
(100% to CommonMark, 100% to GFM with a plugin)
## Contents
* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`Markdown`](#markdown)
* [`MarkdownAsync`](#markdownasync)
* [`MarkdownHooks`](#markdownhooks)
* [`defaultUrlTransform(url)`](#defaulturltransformurl)
* [`AllowElement`](#allowelement)
* [`Components`](#components)
* [`ExtraProps`](#extraprops)
* [`HooksOptions`](#hooksoptions)
* [`Options`](#options)
* [`UrlTransform`](#urltransform)
* [Examples](#examples)
* [Use a plugin](#use-a-plugin)
* [Use a plugin with options](#use-a-plugin-with-options)
* [Use custom components (syntax highlight)](#use-custom-components-syntax-highlight)
* [Use remark and rehype plugins (math)](#use-remark-and-rehype-plugins-math)
* [Plugins](#plugins)
* [Syntax](#syntax)
* [Compatibility](#compatibility)
* [Architecture](#architecture)
* [Appendix A: HTML in markdown](#appendix-a-html-in-markdown)
* [Appendix B: Components](#appendix-b-components)
* [Appendix C: line endings in markdown (and JSX)](#appendix-c-line-endings-in-markdown-and-jsx)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#license)
## What is this?
This package is a [React][] component that can be given a string of markdown
that it’ll safely render to React elements.
You can pass plugins to change how markdown is transformed and pass components
that will be used instead of normal HTML elements.
* to learn markdown, see this [cheatsheet and tutorial][commonmark-help]
* to try out `react-markdown`, see [our demo][github-io-react-markdown]
## When should I use this?
There are other ways to use markdown in React out there so why use this one?
The three main reasons are that they often rely on `dangerouslySetInnerHTML`,
have bugs with how they handle markdown, or don’t let you swap elements for
components.
`react-markdown` builds a virtual DOM, so React only replaces what changed,
from a syntax tree.
That’s supported because we use [unified][github-unified],
specifically [remark][github-remark] for markdown and [rehype][github-rehype]
for HTML,
which are popular tools to transform content with plugins.
This package focusses on making it easy for beginners to safely use markdown in
React.
When you’re familiar with unified, you can use a modern hooks based alternative
[`react-remark`][github-react-remark] or [`rehype-react`][github-rehype-react]
manually.
If you instead want to use JavaScript and JSX *inside* markdown files, use
[MDX][github-mdx].
## Install
This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][npm-install]:
```sh
npm install react-markdown
```
In Deno with [`esm.sh`][esmsh]:
```js
import Markdown from 'https://esm.sh/react-markdown@10'
```
In browsers with [`esm.sh`][esmsh]:
```html
```
## Use
A basic hello world:
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
const markdown = '# Hi, *Pluto*!'
createRoot(document.body).render({markdown} )
```
Show equivalent JSX
```js
Hi, Pluto!
```
Here is an example that shows how to use a plugin
([`remark-gfm`][github-remark-gfm],
which adds support for footnotes, strikethrough, tables, tasklists and
URLs directly):
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const markdown = `Just a link: www.nasa.gov.`
createRoot(document.body).render(
{markdown}
)
```
Show equivalent JSX
```js
Just a link: www.nasa.gov.
```
## API
This package exports the identifiers
[`MarkdownAsync`][api-markdown-async],
[`MarkdownHooks`][api-markdown-hooks],
and
[`defaultUrlTransform`][api-default-url-transform].
The default export is [`Markdown`][api-markdown].
It also exports the additional [TypeScript][] types
[`AllowElement`][api-allow-element],
[`Components`][api-components],
[`ExtraProps`][api-extra-props],
[`HooksOptions`][api-hooks-options],
[`Options`][api-options],
and
[`UrlTransform`][api-url-transform].
### `Markdown`
Component to render markdown.
This is a synchronous component.
When using async plugins,
see [`MarkdownAsync`][api-markdown-async] or
[`MarkdownHooks`][api-markdown-hooks].
###### Parameters
* `options` ([`Options`][api-options])
— props
###### Returns
React element (`ReactElement`).
### `MarkdownAsync`
Component to render markdown with support for async plugins
through async/await.
Components returning promises are supported on the server.
For async support on the client,
see [`MarkdownHooks`][api-markdown-hooks].
###### Parameters
* `options` ([`Options`][api-options])
— props
###### Returns
Promise to a React element (`Promise`).
### `MarkdownHooks`
Component to render markdown with support for async plugins through hooks.
This uses `useEffect` and `useState` hooks.
Hooks run on the client and do not immediately render something.
For async support on the server,
see [`MarkdownAsync`][api-markdown-async].
###### Parameters
* `options` ([`Options`][api-options])
— props
###### Returns
React node (`ReactNode`).
### `defaultUrlTransform(url)`
Make a URL safe.
This follows how GitHub works.
It allows the protocols `http`, `https`, `irc`, `ircs`, `mailto`, and `xmpp`,
and URLs relative to the current protocol (such as `/something`).
###### Parameters
* `url` (`string`)
— URL
###### Returns
Safe URL (`string`).
### `AllowElement`
Filter elements (TypeScript type).
###### Parameters
* `node` ([`Element` from `hast`][github-hast-element])
— element to check
* `index` (`number | undefined`)
— index of `element` in `parent`
* `parent` ([`Node` from `hast`][github-hast-nodes])
— parent of `element`
###### Returns
Whether to allow `element` (`boolean`, optional).
### `Components`
Map tag names to components (TypeScript type).
###### Type
```ts
import type {ExtraProps} from 'react-markdown'
import type {ComponentProps, ElementType} from 'react'
type Components = {
[Key in Extract]?: ElementType & ExtraProps>
}
```
### `ExtraProps`
Extra fields we pass to components (TypeScript type).
###### Fields
* `node` ([`Element` from `hast`][github-hast-element], optional)
— original node
### `HooksOptions`
Configuration for [`MarkdownHooks`][api-markdown-hooks] (TypeScript type);
extends the regular [`Options`][api-options] with a `fallback` prop.
###### Extends
[`Options`][api-options].
###### Fields
* `fallback` (`ReactNode`, optional)
— content to render while the processor processing the markdown
### `Options`
Configuration (TypeScript type).
###### Fields
* `allowElement` ([`AllowElement`][api-allow-element], optional)
— filter elements;
`allowedElements` / `disallowedElements` is used first
* `allowedElements` (`Array`, default: all tag names)
— tag names to allow;
cannot combine w/ `disallowedElements`
* `children` (`string`, optional)
— markdown
* `components` ([`Components`][api-components], optional)
— map tag names to components
* `disallowedElements` (`Array`, default: `[]`)
— tag names to disallow;
cannot combine w/ `allowedElements`
* `rehypePlugins` (`Array`, optional)
— list of [rehype plugins][github-rehype-plugins] to use
* `remarkPlugins` (`Array`, optional)
— list of [remark plugins][github-remark-plugins] to use
* `remarkRehypeOptions`
([`Options` from `remark-rehype`][github-remark-rehype-options],
optional)
— options to pass through to `remark-rehype`
* `skipHtml` (`boolean`, default: `false`)
— ignore HTML in markdown completely
* `unwrapDisallowed` (`boolean`, default: `false`)
— extract (unwrap) what’s in disallowed elements;
normally when say `strong` is not allowed, it and it’s children are dropped,
with `unwrapDisallowed` the element itself is replaced by its children
* `urlTransform` ([`UrlTransform`][api-url-transform], default:
[`defaultUrlTransform`][api-default-url-transform])
— change URLs
### `UrlTransform`
Transform URLs (TypeScript type).
###### Parameters
* `url` (`string`)
— URL
* `key` (`string`, example: `'href'`)
— property name
* `node` ([`Element` from `hast`][github-hast-element])
— element to check
###### Returns
Transformed URL (`string`, optional).
## Examples
### Use a plugin
This example shows how to use a remark plugin.
In this case, [`remark-gfm`][github-remark-gfm],
which adds support for strikethrough, tables, tasklists and URLs directly:
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const markdown = `A paragraph with *emphasis* and **strong importance**.
> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
* Lists
* [ ] todo
* [x] done
A table:
| a | b |
| - | - |
`
createRoot(document.body).render(
{markdown}
)
```
Show equivalent JSX
```js
<>
A paragraph with emphasis and strong importance.
A block quote with strikethrough and a URL:{' '}
https://reactjs.org.
- Lists
-
todo
-
done
A table:
a
b
```
### Use a plugin with options
This example shows how to use a plugin and give it options.
To do that, use an array with the plugin at the first place, and the options
second.
[`remark-gfm`][github-remark-gfm] has an option to allow only double tildes for
strikethrough:
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const markdown = 'This ~is not~ strikethrough, but ~~this is~~!'
createRoot(document.body).render(
{markdown}
)
```
Show equivalent JSX
```js
This ~is not~ strikethrough, but this is!
```
### Use custom components (syntax highlight)
This example shows how you can overwrite the normal handling of an element by
passing a component.
In this case, we apply syntax highlighting with the seriously super amazing
[`react-syntax-highlighter`][github-react-syntax-highlighter] by
[**@conorhastings**][github-conorhastings]:
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:
~~~js
console.log('It works!')
~~~
`
createRoot(document.body).render(
{children}
)
}
}}
/>
)
```
Show equivalent JSX
```js
<>
Here is some JavaScript code:
```
### Use remark and rehype plugins (math)
This example shows how a syntax extension
(through [`remark-math`][github-remark-math])
is used to support math in markdown, and a transform plugin
([`rehype-katex`][github-rehype-katex]) to render that math.
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you
const markdown = `The lift coefficient ($C_L$) is a dimensionless coefficient.`
createRoot(document.body).render(
{markdown}
)
```
Show equivalent JSX
```js
The lift coefficient (
) is a dimensionless coefficient.
```
## Plugins
We use [unified][github-unified],
specifically [remark][github-remark] for markdown and
[rehype][github-rehype] for HTML,
which are tools to transform content with plugins.
Here are three good ways to find plugins:
* [`awesome-remark`][github-awesome-remark] and
[`awesome-rehype`][github-awesome-rehype]
— selection of the most awesome projects
* [List of remark plugins][github-remark-plugins] and
[list of rehype plugins][github-rehype-plugins]
— list of all plugins
* [`remark-plugin`][github-topic-remark-plugin] and
[`rehype-plugin`][github-topic-rehype-plugin] topics
— any tagged repo on GitHub
## Syntax
`react-markdown` follows CommonMark, which standardizes the differences between
markdown implementations, by default.
Some syntax extensions are supported through plugins.
We use [`micromark`][github-micromark] under the hood for our parsing.
See its documentation for more information on markdown, CommonMark, and
extensions.
## 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, `react-markdown@10`,
compatible with Node.js 16.
They work in all modern browsers (essentially: everything not IE 11).
You can use a bundler (such as esbuild, webpack, or Rollup) to use this package
in your project, and use its options (or plugins) to add support for legacy
browsers.
## Architecture
react-markdown
+----------------------------------------------------------------------------------------------------------------+
| |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| | | | | | | | | | | |
markdown-+->+ remark +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ components +-+->react elements
| | | | | | | | | | | |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| |
+----------------------------------------------------------------------------------------------------------------+
To understand what this project does, it’s important to first understand what
unified does: please read through the [`unifiedjs/unified`][github-unified]
readme
(the part until you hit the API section is required reading).
`react-markdown` is a unified pipeline — wrapped so that most folks don’t need
to directly interact with unified.
The processor goes through these steps:
* parse markdown to mdast (markdown syntax tree)
* transform through remark (markdown ecosystem)
* transform mdast to hast (HTML syntax tree)
* transform through rehype (HTML ecosystem)
* render hast to React with components
## Appendix A: HTML in markdown
`react-markdown` typically escapes HTML (or ignores it, with `skipHtml`)
because it is dangerous and defeats the purpose of this library.
However, if you are in a trusted environment (you trust the markdown), and
can spare the bundle size (±60kb minzipped), then you can use
[`rehype-raw`][github-rehype-raw]:
```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
const markdown = `
Some *emphasis* and strong!
`
createRoot(document.body).render(
{markdown}
)
```
Show equivalent JSX
```js
Some emphasis and strong!
```
**Note**: HTML in markdown is still bound by how [HTML works in
CommonMark][commonmark-html].
Make sure to use blank lines around block-level HTML that again contains
markdown!
## Appendix B: Components
You can also change the things that come from markdown:
```js
{markdown}
```
👆 That works.
Read on for what doesn’t and why that is.
You might try to write markdown directly in your JSX and find that it **does
not** work:
```js
# Hi
This is **not** a paragraph.
```
The is because in JSX the whitespace (including line endings) is collapsed to
a single space.
So the above example is equivalent to:
```js
# Hi This is **not** a paragraph.
```
Instead, to pass markdown to `Markdown`, you can use an expression:
with a template literal:
```js
{`
# Hi
This is a paragraph.
`}
```
Template literals have another potential problem, because they keep whitespace
(including indentation) inside them.
That means that the following **does not** turn into a heading:
```js
{`
# This is **not** a heading, it’s an indented code block
`}
```
## Security
Use of `react-markdown` is secure by default.
Overwriting `urlTransform` to something insecure will open you up to XSS
vectors.
Furthermore, the `remarkPlugins`, `rehypePlugins`, and `components` you use may
be insecure.
To make sure the content is completely safe, even after what plugins do,
use [`rehype-sanitize`][github-rehype-sanitize].
It lets you define your own schema of what is and isn’t allowed.
## Related
* [`MDX`][github-mdx]
— JSX *in* markdown
* [`remark-gfm`][github-remark-gfm]
— add support for GitHub flavored markdown support
* [`react-remark`][github-react-remark]
— hook based alternative
* [`rehype-react`][github-rehype-react]
— turn HTML into React elements
## 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.
## License
[MIT][file-license] © [Espen Hovlandsdal][author]
[api-allow-element]: #allowelement
[api-components]: #components
[api-default-url-transform]: #defaulturltransformurl
[api-extra-props]: #extraprops
[api-hooks-options]: #hooksoptions
[api-markdown]: #markdown
[api-markdown-async]: #markdownasync
[api-markdown-hooks]: #markdownhooks
[api-options]: #options
[api-url-transform]: #urltransform
[author]: https://espen.codes/
[badge-build-image]: https://github.com/remarkjs/react-markdown/workflows/main/badge.svg
[badge-build-url]: https://github.com/remarkjs/react-markdown/actions
[badge-coverage-image]: https://img.shields.io/codecov/c/github/remarkjs/react-markdown.svg
[badge-coverage-url]: https://codecov.io/github/remarkjs/react-markdown
[badge-downloads-image]: https://img.shields.io/npm/dm/react-markdown.svg
[badge-downloads-url]: https://www.npmjs.com/package/react-markdown
[badge-size-image]: https://img.shields.io/bundlejs/size/react-markdown
[badge-size-url]: https://bundlejs.com/?q=react-markdown
[commonmark-help]: https://commonmark.org/help/
[commonmark-html]: https://spec.commonmark.org/0.31.2/#html-blocks
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
[esmsh]: https://esm.sh
[file-license]: license
[github-awesome-rehype]: https://github.com/rehypejs/awesome-rehype
[github-awesome-remark]: https://github.com/remarkjs/awesome-remark
[github-conorhastings]: https://github.com/conorhastings
[github-hast-element]: https://github.com/syntax-tree/hast#element
[github-hast-nodes]: https://github.com/syntax-tree/hast#nodes
[github-io-react-markdown]: https://remarkjs.github.io/react-markdown/
[github-mdx]: https://github.com/mdx-js/mdx/
[github-micromark]: https://github.com/micromark/micromark
[github-react-remark]: https://github.com/remarkjs/react-remark
[github-react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter
[github-rehype]: https://github.com/rehypejs/rehype
[github-rehype-katex]: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex
[github-rehype-plugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
[github-rehype-raw]: https://github.com/rehypejs/rehype-raw
[github-rehype-react]: https://github.com/rehypejs/rehype-react
[github-rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize
[github-remark]: https://github.com/remarkjs/remark
[github-remark-gfm]: https://github.com/remarkjs/remark-gfm
[github-remark-math]: https://github.com/remarkjs/remark-math
[github-remark-plugins]: https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
[github-remark-rehype-options]: https://github.com/remarkjs/remark-rehype#options
[github-topic-rehype-plugin]: https://github.com/topics/rehype-plugin
[github-topic-remark-plugin]: https://github.com/topics/remark-plugin
[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-support]: https://github.com/remarkjs/.github/blob/main/support.md
[npm-install]: https://docs.npmjs.com/cli/install
[react]: http://reactjs.org
[section-components]: #appendix-b-components
[section-plugins]: #plugins
[section-security]: #security
[section-syntax]: #syntax
[typescript]: https://www.typescriptlang.org
================================================
FILE: script/load-jsx.js
================================================
import fs from 'node:fs/promises'
import {fileURLToPath} from 'node:url'
import {transform} from 'esbuild'
const {getFormat, load, transformSource} = createLoader()
export {getFormat, load, transformSource}
/**
* A tiny JSX loader.
*/
export function createLoader() {
return {load, getFormat, transformSource}
// Node version 17.
/**
* @param {string} href
* @param {unknown} context
* @param {Function} defaultLoad
*/
async function load(href, context, defaultLoad) {
const url = new URL(href)
if (!url.pathname.endsWith('.jsx')) {
return defaultLoad(href, context, defaultLoad)
}
const {code, warnings} = await transform(String(await fs.readFile(url)), {
format: 'esm',
loader: 'jsx',
sourcefile: fileURLToPath(url),
sourcemap: 'both',
target: 'esnext'
})
if (warnings) {
for (const warning of warnings) {
console.log(warning.location)
console.log(warning.text)
}
}
return {format: 'module', shortCircuit: true, source: code}
}
// Pre version 17.
/**
* @param {string} href
* @param {unknown} context
* @param {Function} defaultGetFormat
*/
function getFormat(href, context, defaultGetFormat) {
const url = new URL(href)
return url.pathname.endsWith('.jsx')
? {format: 'module'}
: defaultGetFormat(href, context, defaultGetFormat)
}
/**
* @param {Buffer} value
* @param {{url: string, [x: string]: unknown}} context
* @param {Function} defaultTransformSource
*/
async function transformSource(value, context, defaultTransformSource) {
const url = new URL(context.url)
if (!url.pathname.endsWith('.jsx')) {
return defaultTransformSource(value, context, defaultTransformSource)
}
const {code, warnings} = await transform(String(value), {
format: context.format === 'module' ? 'esm' : 'cjs',
loader: 'jsx',
sourcefile: fileURLToPath(url),
sourcemap: 'both',
target: 'esnext'
})
if (warnings) {
for (const warning of warnings) {
console.log(warning.location)
console.log(warning.text)
}
}
return {source: code}
}
}
================================================
FILE: test.jsx
================================================
/* @jsxRuntime automatic @jsxImportSource react */
/**
* @import {Root} from 'hast'
* @import {ComponentProps, ReactNode} from 'react'
* @import {ExtraProps} from 'react-markdown'
* @import {Plugin} from 'unified'
*/
/**
* @typedef DeferredPlugin
* Deferred plugin.
* @property {Plugin<[]>} plugin
* Plugin.
* @property {(error: Error) => undefined} reject
* Reject the plugin.
* @property {() => undefined} resolve
* Resolve the plugin.
*/
import assert from 'node:assert/strict'
import test from 'node:test'
import 'global-jsdom/register'
import {render, waitFor} from '@testing-library/react'
import concatStream from 'concat-stream'
import {Component} from 'react'
import {renderToPipeableStream, renderToStaticMarkup} from 'react-dom/server'
import Markdown, {MarkdownAsync, MarkdownHooks} from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeStarryNight from 'rehype-starry-night'
import remarkGfm from 'remark-gfm'
import remarkToc from 'remark-toc'
import {visit} from 'unist-util-visit'
const decoder = new TextDecoder()
test('react-markdown (core)', async function (t) {
await t.test('should expose the public api', async function () {
assert.deepEqual(Object.keys(await import('react-markdown')).sort(), [
'MarkdownAsync',
'MarkdownHooks',
'default',
'defaultUrlTransform'
])
})
})
test('Markdown', async function (t) {
await t.test('should work', function () {
assert.equal(renderToStaticMarkup(a
')
})
await t.test('should throw w/ `source`', function () {
assert.throws(function () {
// @ts-expect-error: check how the runtime handles untyped `source`.
renderToStaticMarkup(\na
\n
'
)
})
await t.test('should support a break', function () {
assert.equal(
renderToStaticMarkup(a
\nb
'
)
})
await t.test('should support a code (block, flow; indented)', function () {
assert.equal(
renderToStaticMarkup(a\n
'
)
})
await t.test('should support a code (block, flow; fenced)', function () {
assert.equal(
renderToStaticMarkup(a\n
'
)
})
await t.test('should support a delete (GFM)', function () {
assert.equal(
renderToStaticMarkup(
a
'
)
})
await t.test('should support an emphasis', function () {
assert.equal(
renderToStaticMarkup(a
'
)
})
await t.test('should support a footnote (GFM)', function () {
assert.equal(
renderToStaticMarkup(
a1
\nFootnotes
\n\n- \n
y ↩
\n \n
\na
'
)
})
await t.test('should support an html (default)', function () {
assert.equal(
renderToStaticMarkup(<i>a</i>
'
)
})
await t.test('should support an html (w/ `rehype-raw`)', function () {
assert.equal(
renderToStaticMarkup(
a
'
)
})
await t.test('should support an image', function () {
assert.equal(
renderToStaticMarkup(
'
)
})
await t.test('should support an image w/ a title', function () {
assert.equal(
renderToStaticMarkup(
'
)
})
await t.test('should support an image reference / definition', function () {
assert.equal(
renderToStaticMarkup(
'
)
})
await t.test('should support code (text, inline)', function () {
assert.equal(
renderToStaticMarkup(a
'
)
})
await t.test('should support a link', function () {
assert.equal(
renderToStaticMarkup(\n- a
\n
'
)
})
await t.test('should support a list (ordered) / list item', function () {
assert.equal(
renderToStaticMarkup(\n- a
\n
'
)
})
await t.test('should support a paragraph', function () {
assert.equal(renderToStaticMarkup(a
')
})
await t.test('should support a strong', function () {
assert.equal(
renderToStaticMarkup(a
'
)
})
await t.test('should support a table (GFM)', function () {
assert.equal(
renderToStaticMarkup(
a b
'
)
})
await t.test('should support a table (GFM; w/ align)', function () {
assert.equal(
renderToStaticMarkup(
a b c d
'
)
})
await t.test('should support a thematic break', function () {
assert.equal(renderToStaticMarkup(
')
})
await t.test('should support ab absolute path', function () {
assert.equal(
renderToStaticMarkup(![a]( "c")
'
)
})
await t.test('should support `skipHtml`', function () {
const actual = renderToStaticMarkup(
abc
')
})
await t.test(
'should support `allowedElements` (drop unlisted nodes)',
function () {
assert.equal(
renderToStaticMarkup(
\n- b
\n
'
)
}
)
await t.test('should support `allowedElements` as a function', function () {
assert.equal(
renderToStaticMarkup(
b
'
)
})
await t.test('should support `disallowedElements`', function () {
assert.equal(
renderToStaticMarkup(
\n- b
\n
'
)
})
await t.test(
'should fail for both `allowedElements` and `disallowedElements`',
function () {
assert.throws(function () {
renderToStaticMarkup(
a
'
)
}
)
await t.test(
'should support `unwrapDisallowed` w/ `disallowedElements`',
function () {
assert.equal(
renderToStaticMarkup(
a
'
)
}
)
await t.test('should support `remarkRehypeOptions`', function () {
assert.equal(
renderToStaticMarkup(
Footnotes
\n\n- \n
a ↩
\n \n
\na
'
)
})
await t.test('should support `components` as functions', function () {
assert.equal(
renderToStaticMarkup(
a
\nb
'
)
assert.equal(calls, 2)
/**
* @param {ComponentProps<'h1'> & ExtraProps} props
*/
function heading(props) {
const {node, ...rest} = props
assert(node)
assert(node.tagName === 'h1' || node.tagName === 'h2')
calls++
return a\n
\nb\n
\nc
'
)
assert.equal(calls, 3)
})
await t.test('should support `components` (li)', function () {
let calls = 0
assert.equal(
renderToStaticMarkup(
\n- a
\n
\n\n- b
\n
'
)
assert.equal(calls, 2)
})
await t.test('should support `components` (ol)', function () {
let calls = 0
assert.equal(
renderToStaticMarkup(
\n- a
\n
'
)
assert.equal(calls, 1)
})
await t.test('should support `components` (ul)', function () {
let calls = 0
assert.equal(
renderToStaticMarkup(
\n- a
\n
'
)
assert.equal(calls, 1)
})
await t.test('should support `components` (tr)', function () {
let calls = 0
assert.equal(
renderToStaticMarkup(
a b
'
)
assert.equal(calls, 2)
})
await t.test('should support `components` (td, th)', function () {
let tdCalls = 0
let thCalls = 0
assert.equal(
renderToStaticMarkup(
a b
'
)
assert.equal(tdCalls, 1)
assert.equal(thCalls, 1)
})
await t.test('should pass `node` to components', function () {
let calls = 0
assert.equal(
renderToStaticMarkup(
a
'
)
assert.equal(calls, 1)
})
await t.test('should support plugins (`remark-gfm`)', function () {
assert.equal(
renderToStaticMarkup(
a b c
'
)
})
await t.test('should support plugins (`remark-toc`)', function () {
assert.equal(
renderToStaticMarkup(
a
Contents
b
c
d
`
)
})
await t.test('should support aria properties', function () {
assert.equal(
renderToStaticMarkup(c
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'input',
properties: {id: 'a', ariaDescribedBy: 'b', required: true},
children: []
})
}
}
})
await t.test('should support data properties', function () {
assert.equal(
renderToStaticMarkup(b
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'i',
properties: {dataWhatever: 'a', dataIgnoreThis: undefined},
children: []
})
}
}
})
await t.test('should support comma separated properties', function () {
assert.equal(
renderToStaticMarkup(c
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'i',
properties: {accept: ['a', 'b']},
children: []
})
}
}
})
await t.test('should support `style` properties', function () {
assert.equal(
renderToStaticMarkup(a
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'i',
properties: {style: 'color: red; font-weight: bold'},
children: []
})
}
}
})
await t.test(
'should support `style` properties w/ vendor prefixes',
function () {
assert.equal(
renderToStaticMarkup(
a
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'i',
properties: {style: '-ms-b: 1; -webkit-c: 2'},
children: []
})
}
}
}
)
await t.test('should support broken `style` properties', function () {
assert.equal(
renderToStaticMarkup(a
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'i',
properties: {style: 'broken'},
children: []
})
}
}
})
await t.test('should support SVG elements', function () {
assert.equal(
renderToStaticMarkup(a
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({
type: 'element',
tagName: 'svg',
properties: {
viewBox: '0 0 500 500',
xmlns: 'http://www.w3.org/2000/svg'
},
children: [
{
type: 'element',
tagName: 'title',
properties: {},
children: [{type: 'text', value: 'SVG `` element'}]
},
{
type: 'element',
tagName: 'circle',
properties: {cx: 120, cy: 120, r: 100},
children: []
},
// `strokeMiterLimit` in hast, `strokeMiterlimit` in React.
{
type: 'element',
tagName: 'path',
properties: {strokeMiterLimit: -1},
children: []
}
]
})
}
}
})
await t.test('should support comments (ignore them)', function () {
const input = 'a'
const actual = renderToStaticMarkup(
a
'
assert.equal(actual, expected)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
tree.children.unshift({type: 'comment', value: 'things!'})
}
}
})
await t.test('should support table cells w/ style', function () {
assert.equal(
renderToStaticMarkup(
a
'
)
function plugin() {
/**
* @param {Root} tree
* @returns {undefined}
*/
return function (tree) {
visit(tree, 'element', function (node) {
if (node.tagName === 'th') {
node.properties = {...node.properties, style: 'color: red'}
}
})
}
}
})
await t.test('should not fail on a plugin replacing `root`', function () {
assert.equal(
renderToStaticMarkup(a
')
resolve()
})
)
.on('error', reject)
})
})
await t.test(
'should support async plugins w/ `MarkdownAsync` (`rehype-starry-night`)',
async function () {
return new Promise(function (resolve) {
renderToPipeableStream(
console.log(3.14)\n
'
)
resolve()
})
)
})
}
)
})
// Note: hooks are not supported on the “server”.
test('MarkdownHooks', async function (t) {
await t.test('should support `MarkdownHooks`', async function () {
const plugin = deferPlugin()
const result = render(
a
')
})
await t.test(
'should support async plugins w/ `MarkdownHooks` (`rehype-starry-night`)',
async function () {
const plugin = deferPlugin()
const result = render(
console.log(3.14)\n
'
)
}
)
await t.test('should support `fallback`', async function () {
const plugin = deferPlugin()
const result = render(
a
')
})
await t.test('should support plugins that error', async function () {
const plugin = deferPlugin()
const result = render(
)
assert.equal(result.container.innerHTML, '')
console.info('\nNote: the below error (`Error: rejected`) is expected.\n')
plugin.reject(new Error('rejected'))
await waitFor(function () {
assert.notEqual(result.container.innerHTML, '')
})
console.info('Note: the above error (`Error: rejected`) was expected.')
assert.equal(result.container.innerHTML, 'Error: rejected')
})
await t.test('should support rerenders', async function () {
const pluginA = deferPlugin()
const pluginB = deferPlugin()
const result = render(
b
')
})
})
/**
* Create an async unified plugin that waits until a promise is resolved or
* rejected from the outside.
*
* @returns {DeferredPlugin}
* Deferred plugin object.
*/
function deferPlugin() {
/** @type {(error: Error) => void} */
let hoistedReject
/** @type {() => void} */
let hoistedResolve
/** @type {Promise} */
const promise = new Promise(function (resolve, reject) {
hoistedResolve = resolve
hoistedReject = reject
})
return {
plugin() {
return function () {
return promise
}
},
reject(error) {
hoistedReject(error)
},
resolve() {
hoistedResolve()
}
}
}
/**
* Basic error boundary.
*/
class ErrorBoundary extends Component {
/**
* @param {Error} error
* Error.
* @returns {undefined}
* Nothing.
*/
componentDidCatch(error) {
this.setState({error})
}
render() {
const props = /** @type {{children: ReactNode}} */ (this.props)
return this.state.error ? String(this.state.error) : props.children
}
state = {
/**
* @type {Error | undefined}
* Error.
*/
error: undefined
}
}
================================================
FILE: tsconfig.json
================================================
{
"compilerOptions": {
"checkJs": true,
"customConditions": ["development"],
"declarationMap": true,
"declaration": true,
"emitDeclarationOnly": true,
"exactOptionalPropertyTypes": true,
"jsx": "preserve",
"lib": ["dom", "es2022"],
"module": "node16",
"strict": true,
"target": "es2022"
},
"exclude": ["coverage/", "node_modules/"],
"include": ["**/*.js", "**/*.jsx"]
}
Show equivalent JSX
```jsHi, Pluto!
```Show equivalent JSX
```jsJust a link: www.nasa.gov.
```Show equivalent JSX
```js <>A paragraph with emphasis and strong importance.
A block quote with
strikethroughand a URL:{' '} https://reactjs.org.
- Lists
- todo
- done
A table:
| a | b |
|---|
Show equivalent JSX
```js
This ~is not~ strikethrough, but this is!
{children}
)
}
}}
/>
)
```
Show equivalent JSX
```js <>Here is some JavaScript code:
```
Show equivalent JSX
```jsThe lift coefficient ( ) is a dimensionless coefficient.
``` react-markdown
+----------------------------------------------------------------------------------------------------------------+
| |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| | | | | | | | | | | |
markdown-+->+ remark +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ components +-+->react elements
| | | | | | | | | | | |
| +----------+ +----------------+ +---------------+ +----------------+ +------------+ |
| |
+----------------------------------------------------------------------------------------------------------------+
Some *emphasis* and strong!
`
createRoot(document.body).render(
Show equivalent JSX
```jsSome emphasis and strong!
a
') }) await t.test('should throw w/ `source`', function () { assert.throws(function () { // @ts-expect-error: check how the runtime handles untyped `source`. renderToStaticMarkup(\n' ) }) await t.test('should support a break', function () { assert.equal( renderToStaticMarkup(a
\n
a
\nb
a\na\na
a
' ) }) await t.test('should support a footnote (GFM)', function () { assert.equal( renderToStaticMarkup(a1
\nFootnotes
\n- \n
- \n
y ↩
\n \n
a
' ) }) await t.test('should support an html (default)', function () { assert.equal( renderToStaticMarkup(<i>a</i>
' ) }) await t.test('should support an html (w/ `rehype-raw`)', function () { assert.equal( renderToStaticMarkup(a
' ) }) await t.test('should support an image', function () { assert.equal( renderToStaticMarkup(a
- \n
- a \n
- \n
- a \n
a
') }) await t.test('should support a strong', function () { assert.equal( renderToStaticMarkup(a
' ) }) await t.test('should support a table (GFM)', function () { assert.equal( renderToStaticMarkup(| a |
|---|
| b |
| a | b | c | d |
|---|
') }) await t.test('should support ab absolute path', function () { assert.equal( renderToStaticMarkup(
abc
') }) await t.test( 'should support `allowedElements` (drop unlisted nodes)', function () { assert.equal( renderToStaticMarkup(- \n
- b \n
b
' ) }) await t.test('should support `disallowedElements`', function () { assert.equal( renderToStaticMarkup(- \n
- b \n
a
' ) } ) await t.test( 'should support `unwrapDisallowed` w/ `disallowedElements`', function () { assert.equal( renderToStaticMarkup(a
' ) } ) await t.test('should support `remarkRehypeOptions`', function () { assert.equal( renderToStaticMarkup(Footnotes
\n- \n
- \n
a ↩
\n \n
a
' ) }) await t.test('should support `components` as functions', function () { assert.equal( renderToStaticMarkup(a
'
)
})
await t.test('should fail on an invalid component', function () {
assert.throws(function () {
renderToStaticMarkup(
a
\nb
' ) assert.equal(calls, 2) /** * @param {ComponentProps<'h1'> & ExtraProps} props */ function heading(props) { const {node, ...rest} = props assert(node) assert(node.tagName === 'h1' || node.tagName === 'h2') calls++ returna\nb\nc
- \n
- a \n
- \n
- b \n
- \n
- a \n
- \n
- a \n
| a |
|---|
| b |
| a |
|---|
| b |
a
' ) assert.equal(calls, 1) }) await t.test('should support plugins (`remark-gfm`)', function () { assert.equal( renderToStaticMarkup(a b c
a
Contents
b
c
d
` ) }) await t.test('should support aria properties', function () { assert.equal( renderToStaticMarkup(c
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'input', properties: {id: 'a', ariaDescribedBy: 'b', required: true}, children: [] }) } } }) await t.test('should support data properties', function () { assert.equal( renderToStaticMarkup(b
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'i', properties: {dataWhatever: 'a', dataIgnoreThis: undefined}, children: [] }) } } }) await t.test('should support comma separated properties', function () { assert.equal( renderToStaticMarkup(c
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'i', properties: {accept: ['a', 'b']}, children: [] }) } } }) await t.test('should support `style` properties', function () { assert.equal( renderToStaticMarkup(a
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'i', properties: {style: 'color: red; font-weight: bold'}, children: [] }) } } }) await t.test( 'should support `style` properties w/ vendor prefixes', function () { assert.equal( renderToStaticMarkup(a
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'i', properties: {style: '-ms-b: 1; -webkit-c: 2'}, children: [] }) } } } ) await t.test('should support broken `style` properties', function () { assert.equal( renderToStaticMarkup(a
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'i', properties: {style: 'broken'}, children: [] }) } } }) await t.test('should support SVG elements', function () { assert.equal( renderToStaticMarkup(a
' ) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({ type: 'element', tagName: 'svg', properties: { viewBox: '0 0 500 500', xmlns: 'http://www.w3.org/2000/svg' }, children: [ { type: 'element', tagName: 'title', properties: {}, children: [{type: 'text', value: 'SVG `a
' assert.equal(actual, expected) function plugin() { /** * @param {Root} tree * @returns {undefined} */ return function (tree) { tree.children.unshift({type: 'comment', value: 'things!'}) } } }) await t.test('should support table cells w/ style', function () { assert.equal( renderToStaticMarkup(| a |
|---|
a
') resolve() }) ) .on('error', reject) }) }) await t.test( 'should support async plugins w/ `MarkdownAsync` (`rehype-starry-night`)', async function () { return new Promise(function (resolve) { renderToPipeableStream(console.log(3.14)\na
') }) await t.test( 'should support async plugins w/ `MarkdownHooks` (`rehype-starry-night`)', async function () { const plugin = deferPlugin() const result = render(console.log(3.14)\na
') }) await t.test('should support plugins that error', async function () { const plugin = deferPlugin() const result = render(b
') }) }) /** * Create an async unified plugin that waits until a promise is resolved or * rejected from the outside. * * @returns {DeferredPlugin} * Deferred plugin object. */ function deferPlugin() { /** @type {(error: Error) => void} */ let hoistedReject /** @type {() => void} */ let hoistedResolve /** @type {Promise