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.
- 🌒 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
$ npm install @uiw/react-markdown-preview --save
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 (
<MarkdownPreview source={source} />
)
}
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
const source = `
## MarkdownPreview
## Header 2
### Header 3
`;
export default function Demo() {
return (
<MarkdownPreview
source={source}
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)
}
}}
/>
);
}
syntax: ```jsx {1,4-5}
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 (
<MarkdownPreview
source={source}
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)
}
}}
/>
);
}
syntax: ```jsx showLineNumbers {1,4-5}
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 (
<MarkdownPreview
source={source}
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)
}
}}
/>
);
}
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 (
<MarkdownPreview source={source} />
);
}
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)
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 (
<MarkdownPreview
source={source}
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 content display via HTML comments, Shown in GitHub readme, excluded in HTML.
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
const source = `
<!--rehype:ignore:start-->
Content ignored
<!--rehype:ignore:end-->
Some content is ignored, please check the source code
`;
export default function Demo() {
return (
<MarkdownPreview
source={source}
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)
}
}}
/>
);
}
<!--rehype:ignore:start-->Ignored content<!--rehype:ignore:end-->
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 (
<Fragment>
<code id={demoid.current} style={{ display: "none" }} />
<code ref={refElement} data-name="mermaid" />
</Fragment>
);
}
return <code>{children}</code>;
};
const source = `
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`;
export default function Demo() {
return (
<MarkdownPreview
source={source}
components={{
code: Code
}}
/>
);
}
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.
import React from 'react';
import rehypeSanitize from "rehype-sanitize";
import MarkdownPreview from '@uiw/react-markdown-preview';
const source = `
## MarkdownPreview
**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>
<!-- test --> 123
<!-- test --> 456 <!-- test -->
`;
const rehypePlugins = [rehypeSanitize];
export default function Demo() {
return (
<MarkdownPreview source={source} rehypePlugins={rehypePlugins} />
)
}
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<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
'data-color-mode'?: 'light' | 'dark';
};
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
rehypeRewrite?: RehypeRewriteOptions['rewrite'];
} & ReactMarkdownProps;
source
(string
, default:''
)
Markdown to parseclassName
(string?
)
Wrap the markdown in adiv
with this class name
This ReactMarkdownProps
details. Upgrade react-markdown
v6
children
(string
, default:''
)
Markdown to parseclassName
(string?
)
Wrap the markdown in adiv
with this class nameskipHtml
(boolean
, default:->false
true
)
Ignore HTML in Markdown completelysourcePos
(boolean
, default:false
)
Pass a prop to all components with a serialized position (data-sourcepos="3:1-3:13"
)rawSourcePos
(boolean
, default:false
)
Pass a prop to all components with their [position][] (sourcePosition: {start: {line: 3, column: 1}, end:…}
)includeElementIndex
(boolean
, default:false
)
Pass theindex
(number of elements before it) andsiblingCount
(number of elements in parent) as props to all componentsallowedElements
(Array.<string>
, default:undefined
)
Tag names to allow (can’t combine w/disallowedElements
). By default all elements are alloweddisallowedElements
(Array.<string>
, default:undefined
)
Tag names to disallow (can’t combine w/allowedElements
). By default no elements are disallowedallowElement
((element, index, parent) => boolean?
, optional)
Function called to check if an element is allowed (when truthy) or not.allowedElements
/disallowedElements
is used first!unwrapDisallowed
(boolean
, default:false
)
Extract (unwrap) the children of not allowed elements. By default, whenstrong
is not allowed, it and it’s children is dropped, but withunwrapDisallowed
the element itself is dropped but the children usedlinkTarget
(string
or(href, children, title) => string
, optional)
Target to use on links (such as_blank
for<a target="_blank"…
)transformLinkUri
((href, children, title) => string
, default:./uri-transformer.js
, optional)
URL to use for links. The default allows onlyhttp
,https
,mailto
, andtel
, and is exported from this module asuriTransformer
. Passnull
to allow all URLs. See [security][]transformImageUri
((src, alt, title) => string
, default:./uri-transformer.js
, optional)
Same astransformLinkUri
but for imagescomponents
(Object.<string, Component>
, default:{}
)
Object mapping tag names to React componentsremarkPlugins
(Array.<Plugin>
, default:[]
)
List of remark plugins to use. See the next section for examples on how to pass optionsrehypePlugins
(Array.<Plugin>
, default:[]
)
List of rehype plugins to use. See the next section for examples on how to pass options
Use HTML comments <!--rehype:xxx-->
to let Markdown support style customization.
## Title
<!--rehype:style=display: flex; height: 230px; align-items: center; justify-content: center; font-size: 38px;-->
Markdown Supports **Style**<!--rehype:style=color: red;-->
Support for GFM footnotes
Here is a simple footnote[^1]. With some additional text after it.
[^1]: My reference.
# Hello World
<!--rehype:ignore:start-->Hello World<!--rehype:ignore:end-->
Good!
Output:
<h1>Hello World</h1>
<p>Good!</p>
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.
<html data-color-mode="dark">
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
Inherit custom color variables by adding .wmde-markdown-var
selector.
const Demo = () => {
return (
<div>
<div className="wmde-markdown-var"> </div>
<MarkdownPreview source="Hello World!" />
</div>
)
}
Set the light
theme.
<MarkdownPreview
source="Hello World!"
wrapperElement={{
+ "data-color-mode": "light"
}}
/>
Runs the project in development mode.
# Step 1, run first,
# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
# listen to the component compile and output the .css file
npm run start
# Step 2, development mode, listen to compile preview website instance
npm run doc
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
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.
As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.