React-Markdown-Plus ·

How to use

import React, { Component } from 'react';

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

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

export default App;

Source is a String.

Example

Source Code

After Render:

Todo

• [x] use markdown-it to render markdown
• [x] use prism.js for code highlight
  • [x] stand-alone themes and plugins
  • [x] alias language names
  • [x] 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
• [x] KaTeX
  • [x] convert asciimath to TeX
  • [x] import KaTeX css
• [ ] diagrams
  • [ ] Sequance diagrams
  • [ ] Flowchart
  • [ ] Gant diagrams
• [ ] custom container
• [ ] definition list
• [ ] Charts
• [ ] footnote