React-Markdown-Plus ·

Installation

npm install --save react-markdown-plus

How to use

importReact,{Component}from'react';importsourcefrom'./source.md';importMarkdownfrom'react-markdown-plus';classAppextendsComponent{render(){return(<Markdowntext={source}style={{maxWidth: 1000}}/>);};};exportdefaultApp;

Where source is a string and style is an object. The default style is {margin: '50px auto', maxWidth: 512}.

Example

Source Code

After Render:

Todo

• use markdown-it to render markdown
• use prism.js for code highlight
  • stand-alone themes and plugins
  • alias language names
  • work 1: Line Highlight, Line Numbers, Show Invisibles, File Highlight
  • work 2: Toolbar, Show Language, Copy to Clipboard Button
  • work 3: Previewer
  • work 4: Keep Markup, Command Line
• KaTeX
  • convert asciimath to TeX
  • import KaTeX css
• diagrams
  • Sequance diagrams
  • Flowchart
  • Gant diagrams
• custom container
• definition list
• Charts
• footnote