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 GitLab issue.