@uiw/react-markdown-preview
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.21 • Public • Published

    React Markdown Preview

    Build and Deploy jsDelivr CDN Downloads Coverage Status npm version npm unpkg

    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

    Open in CodeSandbox

    import MarkdownPreview from '@uiw/react-markdown-preview';
    
    const source = `
    ## MarkdownPreview
    
    > todo: React component preview markdown text.
    `;
    
    function Demo() {
      return (
        <MarkdownPreview source={source} />
      )
    }

    Disable Header links

    import MarkdownPreview from '@uiw/react-markdown-preview';
    
    const source = `
    ## MarkdownPreview
    
    ## Header 2
    
    ### Header 3
    `;
    
    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[1]];
            }
          }}
        />
      );
    }

    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;
      warpperElement?: 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)
      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 <!--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.

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

    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 watch
    # Step 2, development mode, listen to compile preview website instance
    npm start

    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

    Contributors

    As always, thanks to our amazing contributors!

    Made with action-contributors.

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/react-markdown-preview

    DownloadsWeekly Downloads

    17,525

    Version

    4.0.21

    License

    MIT

    Unpacked Size

    3.19 MB

    Total Files

    41

    Last publish

    Collaborators

    • wcjiang