React-Markdown-Plus ·

Installation

npm install --save react-markdown-plus

How to use

import React, { Component } from 'react';

import source from './source.md';
import Markdown from 'react-markdown-plus';

class App extends Component {
  render() {
    return (
      <Markdown text={source} style={{maxWidth: 1000}} />
    );
  };
};

export default App;

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