Giter Site home page Giter Site logo

codeyu001 / react-markdown-preview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from uiwjs/react-markdown-preview

0.0 1.0 0.0 33.03 MB

React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.

Home Page: https://uiwjs.github.io/react-markdown-preview

License: MIT License

TypeScript 60.97% HTML 2.64% CSS 6.93% Less 29.12% Shell 0.34%

react-markdown-preview's Introduction

React Markdown Preview

Build and Deploy 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.

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

Options Props

import { ReactMarkdownProps } from 'react-markdown';

type MarkdownPreviewProps = {
  className?: string;
  source?: string;
  style?: React.CSSProperties;
  warpperElement?: HTMLDivElement;
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
  onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
} & 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.

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!

Related

If you need more features-rich Markdown Editor, you can use @uiwjs/react-markdown-editor

License

Licensed under the MIT License.

react-markdown-preview's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.