• Stars
    star
    270
  • Rank 152,189 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.

React Markdown Preview

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

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

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

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.

More Repositories

1

province-city-china

๐Ÿ‡จ๐Ÿ‡ณๆœ€ๅ…จๆœ€ๆ–ฐไธญๅ›ฝใ€็œใ€ๅธ‚ใ€ๅŒบๅŽฟใ€ไนก้•‡่ก—้“ใ€‘json,csv,sqlๆ•ฐๆฎ
JavaScript
2,661
star
2

react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
2,119
star
3

react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
TypeScript
1,611
star
4

uiw

โš›๏ธ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
TypeScript
708
star
5

react-login-page

Some `react` login pages, which can be used quickly after installation.
TypeScript
570
star
6

react-textarea-code-editor

A simple code editor with syntax highlighting.
TypeScript
479
star
7

react-amap

ๅŸบไบŽ React ๅฐ่ฃ…็š„้ซ˜ๅพทๅœฐๅ›พ็ป„ไปถ๏ผŒๅธฎๅŠฉไฝ ่ฝปๆพ็š„ๆŽฅๅ…ฅๅœฐๅ›พๅˆฐ React ้กน็›ฎไธญใ€‚
TypeScript
415
star
8

react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.
TypeScript
325
star
9

react-monacoeditor

Monaco Editor component for React.
TypeScript
290
star
10

react-color

๐ŸŽจ Is a tiny color picker widget component for React apps.
TypeScript
273
star
11

react-baidu-map

ๅŸบไบŽ React ๅฐ่ฃ…็š„็™พๅบฆๅœฐๅ›พ็ป„ไปถ๏ผŒๆ”ฏๆŒ React Hook๏ผŒๅธฎๅŠฉไฝ ่ฝปๆพ็š„ๆŽฅๅ…ฅๅœฐๅ›พๅˆฐ React ้กน็›ฎไธญใ€‚
TypeScript
221
star
12

react-native-alipay

ๅŸบไบŽ React Native ็š„ๅฎๆ”ฏไป˜ๅŒ…๏ผŒๅทฒๆ›ดๆ–ฐๅˆฐๆœ€ๆ–ฐ็š„ๆ”ฏไป˜ๅฎ SDK ็‰ˆๆœฌ๏ผŒๆ”ฏๆŒAndroid/iOSใ€‚
Java
208
star
13

react-heat-map

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
TypeScript
198
star
14

react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
TypeScript
187
star
15

icons

The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
HTML
138
star
16

npm-unpkg

A web application to view npm package files, Based on unpkg.
TypeScript
101
star
17

react-split

A piece of view can be divided into areas where the width or height can be adjusted by dragging.
TypeScript
66
star
18

react-code-preview

Code edit preview for React.
TypeScript
64
star
19

react-native-uiw

A UI component library based on React Native (Android & iOS).
TypeScript
45
star
20

json-viewer

Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
TypeScript
45
star
21

react-native-amap-geolocation

React Native ้ซ˜ๅพทๅœฐๅ›พๅฎšไฝๆจกๅ—๏ผŒๆ”ฏๆŒ Android/iOSใ€‚
Java
42
star
22

react-signature

A signature board component for react.
TypeScript
36
star
23

react-watermark

A react component that adds a watermark to an area of a web page.
TypeScript
33
star
24

react-native-wechat

React Native ๅŒ…ไฝฟ็”จๅพฎไฟกๅˆ†ไบซใ€็™ปๅฝ•ใ€ๆ”ถ่—ใ€ๆ”ฏไป˜็ญ‰ๅŠŸ่ƒฝ๏ผŒๆ”ฏๆŒAndroid/iOSใ€‚
Java
31
star
25

file-icons

File icons in the file tree.
HTML
30
star
26

free-font

ๆ”ถๅฝ•ๅ•†็”จๅ…่ดนๆฑ‰ๅญ—ๅญ—ไฝ“ Free Font
JavaScript
26
star
27

uiw-admin

UIW-Admin Panel Framework, Powered by React and @uiwjs.
TypeScript
22
star
28

babel-plugin-transform-remove-imports

Remove the specified import declaration when you use the babel transform to build the package.
JavaScript
22
star
29

react-run-web

Online Code Editor for Rapid Web Development.
TypeScript
21
star
30

react-mac-keyboard

Macbook computer keyboard style for react component.
TypeScript
18
star
31

react-native-template

React Native template for react-native-uiw.
JavaScript
17
star
32

next-remove-imports

The default behavior is to remove all .less/.css/.scss/.sass/.styl imports from all packages in node_modules.
JavaScript
17
star
33

react-use-online

useOnline is a tiny, zero-dependency hook for responding to online/offline changes.
TypeScript
17
star
34

ui-color

Converting HEX & RGB colors to UIColor/NSColor/Color for both Objective C & Swift.
TypeScript
16
star
35

copy-to-clipboard

Copy text to the clipboard in modern browsers
JavaScript
16
star
36

react-iframe

This component allows you to wrap your entire React application or each component in an <iframe>.
TypeScript
16
star
37

keycode-info

A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key.
TypeScript
15
star
38

reset-css

A tiny modern CSS reset.
CSS
14
star
39

react-codesandbox

A React component is provided that allows you to programmatically generate codesandbox projects from code samples on the fly.
TypeScript
12
star
40

react-github-corners

Add a Github corner to your project page, This GitHub corner for react component/web component.
TypeScript
12
star
41

react-only-when

A declarative component for conditional rendering.
TypeScript
10
star
42

react-tabs-draggable

Draggable tabs for React.
TypeScript
8
star
43

bootstrap-icons

Official open source SVG icon library for Bootstrap.
8
star
44

uiwjs.github.io

The official documentation site for @uiwjs. https://uiwjs.github.io
8
star
45

react-clock

An analog clock for your React app.
TypeScript
7
star
46

vscode-uiw

Preview uiw document in vscode.
TypeScript
7
star
47

react-code-preview-layout

A react component showing the layout of `code` and `code preview example`.
TypeScript
7
star
48

react-layout

Layout component for React. Handling the overall layout of a page.
TypeScript
7
star
49

react-markdown-preview-example

Preview the markdown files and run the React examples in the documentation.
TypeScript
7
star
50

react-csv-reader

React component that handles csv file input and its parsing.
TypeScript
7
star
51

react-prismjs

React Component for prismjs.
TypeScript
7
star
52

react-use-colorscheme

useColorScheme() provides access to the devices color scheme.
TypeScript
7
star
53

react-native-transport-location

Objective-C
6
star
54

date-formatter

Get a formatted date.
TypeScript
6
star
55

react-head

React components will manage your changes to the document head
TypeScript
4
star
56

react-shields

Shields.io for react component, Quality metadata badges for open source projects.
TypeScript
4
star
57

react-stackblitz

A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.
TypeScript
4
star
58

react-back-to-top

A minimal lightweight react component for adding a nice scroll up (back to top) button with onScroll progress.
TypeScript
4
star
59

react-monorepo-template

Simple React package development project example template.
TypeScript
3
star
60

auto-gitee-mirror

Use GitHub Actions to sync from GitHub to Gitee
3
star
61

react-keywords

Highlight a keyword in a piece of text and return a React element.
TypeScript
3
star
62

react-codepen

A React component is provided that allows you to programmatically generate codepen projects from code samples on the fly.
TypeScript
3
star
63

css-filter

A filter CSS generator that helps you quickly generate filter CSS declarations for your website. It comes with many options and it demonstrates instantly.
TypeScript
3
star
64

babel-plugin-transform-uiw-import

Modular import plugin for babel.
JavaScript
2
star
65

react-xml-reader

React component that handles xml file input and its parsing.
TypeScript
2
star
66

rematch-loading

Loading indicator plugin for @rematch.
TypeScript
1
star
67

logo

Source files of uiw's logo.
1
star
68

.github

Welcome to the uiwjs organization.
1
star