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

Quick Start

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

Usage Example

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} />
  )
}

Disable Header links

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)
        }
      }}
    />
  );
}

highlight line

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)
        }
      }}
    />
  );
}

Show Line Numbers

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)
        }
      }}
    />
  );
}

Ignore

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

Options Props

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 parse
className (string?)
Wrap the markdown in a div with this class name

This ReactMarkdownProps details. Upgrade react-markdown v6

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
sourcePos (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 the index (number of elements before it) and siblingCount (number of elements in parent) as props to all components
allowedElements (Array.<string>, default: undefined)
Tag names to allow (can’t combine w/ disallowedElements). By default all elements are allowed
disallowedElements (Array.<string>, default: undefined)
Tag names to disallow (can’t combine w/ allowedElements). By default no elements are disallowed
allowElement ((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, when strong is not allowed, it and it’s children is dropped, but with unwrapDisallowed the element itself is dropped but the children used
linkTarget (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 only http, https, mailto, and tel, and is exported from this module as uriTransformer. Pass null to allow all URLs. See [security][]
transformImageUri ((src, alt, title) => string, default: ./uri-transformer.js, optional)
Same as transformLinkUri but for images
components (Object.<string, Component>, default: {})
Object mapping tag names to React components
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

Markdown Features

Supports for CSS Style

Use HTML comments  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.

Ignore content display

# Hello World

<!--rehype:ignore:start-->Hello World<!--rehype:ignore:end-->

Good!

Output:

<h1>Hello World</h1>

<p>Good!</p>

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.

<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"
  }}
/>

Development

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!

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.

uiwjs/react-markdown-preview

uiwjs

Reviews

Repository Details