markdown-for-react

live demo

markdown for react component based on markdown-it, react-html-parser, highlight.js

Usage examples

import React from 'react';
import { render } from 'react-dom';
import MarkdownForReact from 'markdown-for-react';

const text = `
# h1 text
## h2 text
### h3 text
#### h4 text
##### h5 text
###### \`h6 text\`
\`\`\`js
cnsole.log(hello markdown-for-react)
\`\`\`
`

class Example extends React.Component {
  render() {
    return (
      <div>
      	<MarkdownForReact value={"# qweqwe"} />
        <MarkdownForReact value={ text } />
      </div>
    )
  }
}
render(<Example />, document.getElementById('init'));

For Example

h1 text

h2 text

h3 text

h4 text

h5 text

h6 text

"double quotes" and 'single quotes'

bold text

bold text

italic text

italic text

Strikethrough

china

heilongjiang

harbin

• China
  • heilongjiang
    • harin
    • daqing
    • suihua
• England

1. react

2. vue

3. angular

4. jquery

5. css

6. heilongjiang

7. beijing

   // hello world line 1 line 2 line 3

Tables

lib	url
react	https://github.com/facebook/react
vuejs	https://github.com/vuejs/vue
angular	https://github.com/angular/angular

lib	url
react	https://github.com/facebook/react
vuejs	https://github.com/vuejs/vue
angular	https://github.com/angular/angular

link text

link with title

Contributing

You can submit any ideas as pull requests or as a Github issue.