^{Using my app is also a way to support me:}

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

``bash
$ npm install @uiw/react-markdown-preview --save
`

Usage Example

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-preview-co1mj?fontsize=14&hidenavigation=1&theme=dark)

`jsx mdx:preview&checkered=0
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =

MarkdownPreview

> todo: React component preview markdown text.
;

export default function Demo() {
return (

)
}
`

Disable Header links

`jsx mdx:preview&checkered=0
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =

MarkdownPreview

Header 2

$3

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
rehypeRewrite={(node, index, parent) => {
if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
parent.children = parent.children.slice(1)
}
}}
/>
);
}
`

highlight line

syntax: `jsx {1,4-5}

`jsx mdx:preview
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =
\\\js {2}
function () {
console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
\\\
\\\js {2}
function () {
console.log('hello ')
}
\\\
;

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
rehypeRewrite={(node, index, parent) => {
if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
parent.children = parent.children.slice(1)
}
}}
/>
);
}
`

Show Line Numbers

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

`jsx mdx:preview?background=#fff
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =
\\\js showLineNumbers
function () {
console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
\\\
\\\js showLineNumbers {2}
function () {
console.log('hello ')
}
\\\
;

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
rehypeRewrite={(node, index, parent) => {
if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
parent.children = parent.children.slice(1)
}
}}
/>
);
}
`

Code Highlight

`jsx mdx:preview
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =
\\\js
function () {
console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
\\\
\\\js
function () {
console.log('hello ')
}
\\\
;

export default function Demo() {
return (

);
}
`

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)

`jsx mdx:preview
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';

const source =
\\\js
function () {
console.log('hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello')
}
\\\
\\\js
function () {
console.log('hello ')
}
\\\
;

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
rehypeRewrite={(node, index, parent) => {
if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
parent.children = parent.children.slice(1)
}
}}
/>
);
}
`

Ignore

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

`jsx mdx:preview?background=#fff
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =

Content ignored

Some content is ignored, please check the source code
;

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
rehypeRewrite={(node, index, parent) => {
if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
parent.children = parent.children.slice(1)
}
}}
/>
);
}
`

`md
Ignored content
`

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.

`bash
npm install katex
`

`jsx mdx:preview?background=#fff
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

const source = This is to display the
\\$\$\c = \\pm\\sqrt{a^2 + b^2}\$\$\
in one line

\\\KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\\\
;

export default function Demo() {
const [value, setValue] = React.useState(source);
return (
source={source}
style={{ padding: 16 }}
components={{
code: ({ children = [], className, ...props }) => {
if (typeof children === 'string' && /^\$\$(.*)\$\$/.test(children)) {
const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
throwOnError: false,
});
return ;
}
const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
if (
typeof code === 'string' &&
typeof className === 'string' &&
/^language-katex/.test(className.toLocaleLowerCase())
) {
const html = katex.renderToString(code, {
throwOnError: false,
});
return ;
}
return {children};
},
}}
/>
);
}
`

Support Custom Mermaid Preview

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

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-preview-https-github-com-uiwjs-react-markdown-preview-issues-238-lw6vr5?fontsize=14&hidenavigation=1&theme=dark)

`jsx mdx:preview?background=#fff
import React, { useState, useRef, useEffect, Fragment, useCallback } from "react";
import MarkdownPreview from '@uiw/react-markdown-preview';
import { getCodeString } from 'rehype-rewrite';
import mermaid from "mermaid";

const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
const Code = ({ inline, children = [], className, ...props }) => {
const demoid = useRef(dome${randomid()});
const [container, setContainer] = useState(null);
const isMermaid = className && /^language-mermaid/.test(className.toLocaleLowerCase());
const code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';

const reRender = async () => {
if (container && isMermaid) {
try {
const str = await mermaid.render(demoid.current, code);
container.innerHTML = str.svg;
} catch (error) {
container.innerHTML = error;
}
}
}

useEffect(() => {
reRender()
}, [container, isMermaid, code, demoid]);

const refElement = useCallback((node) => {
if (node !== null) {
setContainer(node);
}
}, []);

if (isMermaid) {
return (




);
}
return {children};
};
const 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.

\\\mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
\\\

\\\mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
\\\
;
// const source =
// \\\mermaid
// graph TD;
// A-->B;
// A-->C;
// B-->D;
// C-->D;
// \\\
// ;

export default function Demo() {
return (
source={source}
style={{ padding: 16 }}
components={{
code: Code
}}
/>
);
}
`

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.

`jsx mdx:preview&checkered=0
import React from 'react';
import rehypeSanitize from "rehype-sanitize";
import MarkdownPreview from '@uiw/react-markdown-preview';

const source =


MarkdownPreview

Hello world!!!

123

456
;

const rehypePlugins = [rehypeSanitize];
export default function Demo() {
return (

)
}
`

Options Props

`typescript
import { ReactMarkdownProps } from 'react-markdown';
import { RehypeRewriteOptions } from 'rehype-rewrite';

type MarkdownPreviewProps = {
prefixCls?: string;
className?: string;
source?: string;
disableCopy?: boolean;
style?: React.CSSProperties;
pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList;
wrapperElement?: React.DetailedHTMLProps, HTMLDivElement> & {
'data-color-mode'?: 'light' | 'dark';
};
onScroll?: (e: React.UIEvent) => void;
onMouseOver?: (e: React.MouseEvent) => void;
rehypeRewrite?: RehypeRewriteOptions['rewrite'];
} & 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., default: [])\
List of remark plugins to use.
See the next section for examples on how to pass options
- rehypePlugins (Array., 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

$3

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.

$3

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

$3

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

$3

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.

$3

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

$3

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

$3

Use HTML comments to let Markdown support style customization.

`markdown


Title