React Markdown Preview

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. The current document website is converted using this react component.

Features

• 🌒 Support dark-mode/night-mode. @v4
• 🙆🏼‍♂️ GitHub style: The markdown content is rendered as close to the way it's rendered on GitHub as possible.
• 🏋🏾‍♂️ Support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
• 🍭 Support automatic code block highlight.
• 🐝 Support for defining styles via comment.
• ⛳️ Support for GFM footnotes
• ⛳️ Support for Github Alert

Quick Start

1$ npm install @uiw/react-markdown-preview --save

Usage Example

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5## MarkdownPreview
6
7> todo: React component preview markdown text.
8`;
9
10export default function Demo() {
11  return (
12    <MarkdownPreview source={source} style={{ padding: 16 }} />
13  )
14}

Disable Header links

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5## MarkdownPreview
6
7## Header 2
8
9### Header 3
10`;
11
12export default function Demo() {
13  return (
14    <MarkdownPreview
15      source={source}
16      style={{ padding: 16 }}
17      rehypeRewrite={(node, index, parent) => {
18        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
19          parent.children = parent.children.slice(1)
20        }
21      }}
22    />
23  );
24}

highlight line

syntax: ```jsx {1,4-5}

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5\`\`\`js {2}
6function () {
7  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
8}
9\`\`\`
10\`\`\`js {2}
11function () {
12  console.log('hello ')
13}
14\`\`\`
15`;
16
17export default function Demo() {
18  return (
19    <MarkdownPreview
20      source={source}
21      style={{ padding: 16 }}
22      rehypeRewrite={(node, index, parent) => {
23        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
24          parent.children = parent.children.slice(1)
25        }
26      }}
27    />
28  );
29}

Show Line Numbers

syntax: ```jsx showLineNumbers {1,4-5}

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5\`\`\`js showLineNumbers
6function () {
7  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
8}
9\`\`\`
10\`\`\`js showLineNumbers {2}
11function () {
12  console.log('hello ')
13}
14\`\`\`
15`;
16
17export default function Demo() {
18  return (
19    <MarkdownPreview
20      source={source}
21      style={{ padding: 16 }}
22      rehypeRewrite={(node, index, parent) => {
23        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
24          parent.children = parent.children.slice(1)
25        }
26      }}
27    />
28  );
29}

Code Highlight

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5\`\`\`js
6function () {
7  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
8}
9\`\`\`
10\`\`\`js
11function () {
12  console.log('hello ')
13}
14\`\`\`
15`;
16
17export default function Demo() {
18  return (
19    <MarkdownPreview source={source} style={{ padding: 16 }} />
20  );
21}

Remove Code Highlight

The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-markdown-preview/nohighlight component does not contain the rehype-prism-plus code highlighting package, showLineNumbers and highlight line functions will no longer work. (#586)

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
3
4const source = `
5\`\`\`js
6function () {
7  console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
8}
9\`\`\`
10\`\`\`js
11function () {
12  console.log('hello ')
13}
14\`\`\`
15`;
16
17export default function Demo() {
18  return (
19    <MarkdownPreview
20      source={source}
21      style={{ padding: 16 }}
22      rehypeRewrite={(node, index, parent) => {
23        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
24          parent.children = parent.children.slice(1)
25        }
26      }}
27    />
28  );
29}

Ignore

Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `
5<!--rehype:ignore:start-->
6Content ignored
7<!--rehype:ignore:end-->
8Some content is ignored, please check the source code
9`;
10
11export default function Demo() {
12  return (
13    <MarkdownPreview
14      source={source}
15      style={{ padding: 16 }}
16      rehypeRewrite={(node, index, parent) => {
17        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
18          parent.children = parent.children.slice(1)
19        }
20      }}
21    />
22  );
23}

1<!--rehype:ignore:start-->Ignored content<!--rehype:ignore:end-->

Support Custom KaTeX Preview

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web, We perform math rendering through KaTeX.

1npm install katex

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3import { getCodeString } from 'rehype-rewrite';
4import katex from 'katex';
5import 'katex/dist/katex.css';
6
7const source = `This is to display the 
8\`\$\$\c = \\pm\\sqrt{a^2 + b^2}\$\$\`
9 in one line
10
11\`\`\`KaTeX
12c = \\pm\\sqrt{a^2 + b^2}
13\`\`\`
14`;
15
16export default function Demo() {
17  const [value, setValue] = React.useState(source);
18  return (
19    <MarkdownPreview
20      source={source}
21      style={{ padding: 16 }}
22      components={{
23        code: ({ children = [], className, ...props }) => {
24          if (typeof children === 'string' && /^\$\$(.*)\$\$/.test(children)) {
25            const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
26              throwOnError: false,
27            });
28            return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
29          }
30          const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
31          if (
32            typeof code === 'string' &&
33            typeof className === 'string' &&
34            /^language-katex/.test(className.toLocaleLowerCase())
35          ) {
36            const html = katex.renderToString(code, {
37              throwOnError: false,
38            });
39            return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
40          }
41          return <code className={String(className)}>{children}</code>;
42        },
43      }}
44    />
45  );
46}

Support Custom Mermaid Preview

Using mermaid to generation of diagram and flowchart from text in a similar manner as markdown

1import React, { useState, useRef, useEffect, Fragment, useCallback } from "react";
2import MarkdownPreview from '@uiw/react-markdown-preview';
3import { getCodeString } from 'rehype-rewrite';
4import mermaid from "mermaid";
5
6const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
7const Code = ({ inline, children = [], className, ...props }) => {
8  const demoid = useRef(`dome${randomid()}`);
9  const [container, setContainer] = useState(null);
10  const isMermaid = className && /^language-mermaid/.test(className.toLocaleLowerCase());
11  const code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';
12
13  const reRender = async () => {
14    if (container && isMermaid) {
15      try {
16        const str = await mermaid.render(demoid.current, code);
17        container.innerHTML = str.svg;
18      } catch (error) {
19        container.innerHTML = error;
20      }
21    }
22  }
23
24  useEffect(() => {
25    reRender()
26  }, [container, isMermaid, code, demoid]);
27
28  const refElement = useCallback((node) => {
29    if (node !== null) {
30      setContainer(node);
31    }
32  }, []);
33
34  if (isMermaid) {
35    return (
36      <Fragment>
37        <code id={demoid.current} style={{ display: "none" }} />
38        <code ref={refElement} data-name="mermaid" />
39      </Fragment>
40    );
41  }
42  return <code>{children}</code>;
43};
44const source = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. 
45
46\`\`\`mermaid
47graph TD
48A[Hard] -->|Text| B(Round)
49B --> C{Decision}
50C -->|One| D[Result 1]
51C -->|Two| E[Result 2]
52\`\`\`
53
54\`\`\`mermaid
55sequenceDiagram
56Alice->>John: Hello John, how are you?
57loop Healthcheck
58    John->>John: Fight against hypochondria
59end
60Note right of John: Rational thoughts!
61John-->>Alice: Great!
62John->>Bob: How about you?
63Bob-->>John: Jolly good!
64\`\`\`
65`;
66// const source = `
67// \`\`\`mermaid
68// graph TD;
69//     A-->B;
70//     A-->C;
71//     B-->D;
72//     C-->D;
73// \`\`\`
74// `;
75
76export default function Demo() {
77  return (
78    <MarkdownPreview
79      source={source}
80      style={{ padding: 16 }}
81      components={{
82        code: Code
83      }}
84    />
85  );
86}

Security

Please note markdown needs to be sanitized if you do not completely trust your authors. Otherwise, your app is vulnerable to XSS. This can be achieved by adding rehype-sanitize as a plugin.

1import React from 'react';
2import rehypeSanitize from "rehype-sanitize";
3import MarkdownPreview from '@uiw/react-markdown-preview';
4
5const source = `
6## MarkdownPreview
7
8**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>
9
10<!-- test --> 123
11
12<!-- test --> 456 <!-- test -->
13`;
14
15const rehypePlugins = [rehypeSanitize];
16export default function Demo() {
17  return (
18    <MarkdownPreview source={source} rehypePlugins={rehypePlugins} style={{ padding: 16 }} />
19  )
20}

Options Props

1import { ReactMarkdownProps } from 'react-markdown';
2import { RehypeRewriteOptions } from 'rehype-rewrite';
3
4type MarkdownPreviewProps = {
5  prefixCls?: string;
6  className?: string;
7  source?: string;
8  disableCopy?: boolean;
9  style?: React.CSSProperties;
10  pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList;
11  wrapperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
12    'data-color-mode'?: 'light' | 'dark';
13  };
14  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
15  onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
16  rehypeRewrite?: RehypeRewriteOptions['rewrite'];
17} & ReactMarkdownProps;

• source (string, default: '')
  Markdown to parse
• className (string?)
  Wrap the markdown in a div with this class name

This ReactMarkdownProps details. Upgrade react-markdown v9

• children (string, default: '')
  Markdown to parse
• className (string?)
  Wrap the markdown in a div with this class name
• skipHtml (boolean, default: false -> true )
  Ignore HTML in Markdown completely
• allowElement ((element, index, parent) => boolean?, optional)
  Function called to check if an element is allowed (when truthy) or not. allowedElements / disallowedElements is used first!
• remarkPlugins (Array.<Plugin>, default: [])
  List of remark plugins to use. See the next section for examples on how to pass options
• rehypePlugins (Array.<Plugin>, default: [])
  List of rehype plugins to use. See the next section for examples on how to pass options

[!NOTE]

Upgrade react-markdown v8 to v9

Add urlTransform

The transformImageUri and transformLinkUri were removed. Having two functions is a bit much, particularly because there are more URLs you might want to change (or which might be unsafe so we make them safe). And their name and APIs were a bit weird. You can use the new urlTransform prop instead to change all your URLs.

Remove linkTarget

The linkTarget option was removed; you should likely not set targets. If you want to, use rehype-external-links.

Remove includeElementIndex

The includeElementIndex option was removed, so index is never passed to components. Write a plugin to pass index:

1import {visit} from 'unist-util-visit'
2
3function rehypePluginAddingIndex() {
4  /**
5   * @param {import('hast').Root} tree
6   * @returns {undefined}
7   */
8  return function (tree) {
9    visit(tree, function (node, index) {
10      if (node.type === 'element' && typeof index === 'number') {
11        node.properties.index = index
12      }
13    })
14  }
15}

Remove rawSourcePos

The rawSourcePos option was removed, so sourcePos is never passed to components. All components are passed node, so you can get node.position from them.

Remove sourcePos

The sourcePos option was removed, so data-sourcepos is never passed to elements. Write a plugin to pass index:

1import {stringifyPosition} from 'unist-util-stringify-position'
2import {visit} from 'unist-util-visit'
3
4function rehypePluginAddingIndex() {
5  /**
6   * @param {import('hast').Root} tree
7   * @returns {undefined}
8   */
9  return function (tree) {
10    visit(tree, function (node) {
11      if (node.type === 'element') {
12        node.properties.dataSourcepos = stringifyPosition(node.position)
13      }
14    })
15  }
16}

Remove extra props passed to certain components

When overwriting components, these props are no longer passed:

• inline on code — create a plugin or use pre for the block
• level on h1, h2, h3, h4, h5, h6 — check node.tagName instead
• checked on li — check task-list-item class or check props.children
• index on li — create a plugin
• ordered on li — create a plugin or check the parent
• depth on ol, ul — create a plugin
• ordered on ol, ul — check node.tagName instead
• isHeader on td, th — check node.tagName instead
• isHeader on tr — create a plugin or check children

Markdown Features

Supports for CSS Style

Use HTML comments <!--rehype:xxx--> to let Markdown support style customization.

1## Title
2<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->
3
4Markdown Supports **Style**<!--rehype:style=color: red;-->

Support for GFM footnotes

1Here is a simple footnote[^1]. With some additional text after it.
2
3[^1]: My reference.

Ignore content display

1# Hello World
2
3<!--rehype:ignore:start-->Hello World<!--rehype:ignore:end-->
4
5Good!

Output:

1<h1>Hello World</h1>
2
3<p>Good!</p>

Support for Github Alerts

1import React from 'react';
2import MarkdownPreview from '@uiw/react-markdown-preview';
3
4const source = `> 
5> 
6> [!NOTE]
7> Useful information that users should know, even when skimming content.
8
9> [!TIP]
10> Helpful advice for doing things better or more easily.
11
12> [!IMPORTANT]
13> Key information users need to know to achieve their goal.
14
15> [!WARNING]
16> Urgent info that needs immediate user attention to avoid problems.
17
18> [!CAUTION]
19> Advises about risks or negative outcomes of certain actions.
20
21
22`;
23
24export default function Demo() {
25  return (
26    <MarkdownPreview source={source} style={{ padding: 16 }} />
27  )
28}

Support dark-mode/night-mode

By default, the dark-mode is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark" parameter for body.

1<html data-color-mode="dark">

1document.documentElement.setAttribute('data-color-mode', 'dark')
2document.documentElement.setAttribute('data-color-mode', 'light')

Inherit custom color variables by adding .wmde-markdown-var selector.

1const Demo = () => {
2  return (
3    <div>
4      <div className="wmde-markdown-var"> </div>
5      <MarkdownPreview source="Hello World!" />
6    </div>
7  )
8}

Set the light theme.

1<MarkdownPreview
2  source="Hello World!"
3  wrapperElement={{
4+    "data-color-mode": "light"
5  }}
6/>

Development

Runs the project in development mode.

1# Step 1, run first,
2# listen to the component compile and output the .js file
3# listen for compilation output type .d.ts file
4# listen to the component compile and output the .css file
5npm run start
6# Step 2, development mode, listen to compile preview website instance
7npm run doc

Builds the app for production to the build folder.

1npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Alternatives

If you need more features-rich Markdown Editor, you can use @uiwjs/react-markdown-editor

• @uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
• @uiw/react-codemirror: CodeMirror component for React. @codemirror
• @uiw/react-monacoeditor: Monaco Editor component for React.

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.