react-showdown2
Forked from jerolimov/react-showdown
Render React components within markdown and markdown as React components!
Features
- Render markdown as React components.
- Render React components within the markdown!
- Supports Showdown extensions, like the Twitter Extension and the Youtube Extension.
Installation
npm install --save react-showdown2
Use as React component
Really simple markdown example with ES6/JSX:
import Markdown from 'react-showdown2'; { var markdown = '# Hello\n\nMore content...'; return <Markdown markup= markdown />}
Use a React component and use it within the markdown with ES6/JSX:
import Markdown from 'react-showdown2'; const MyComponent extends Component render return React.createElementthis.props.tag null this.props.children; }}; { var markdown = '# Hello\n\n<MyComponent tag="strong">More Content...</MyComponent>'; return <Markdown markup= markdown components= MyComponent />}
Use the converter
Really simple markdown example:
var Converter = Converter;var converter = ; var markdown = '# Hello\n\nMore content...';var reactElement = converter;
Use a React component and use it within the markdown:
var createClass = ;var MyComponent = ; var Converter = Converter;var converter = components: 'MyComponent': MyComponent ; var markdown = '# Hello\n\n<MyComponent tag="strong">More Content...</MyComponent>';var reactElement = converter;
Available props / converter options
Converter options will be pushed forward to the showdown converter, please checkout the valid options section.
Just the components
option is managed by this converter.
It define the component name (tag name) to component React class definition
(instance of createClass) mapping. See example above.
Credits
Project is based on the markdown parser Showdown and the "forgiving" htmlparser2.
Alternatives
- reactdown
- react-markdown, based on commonmark.js
- commonmark-react-renderer, based on commonmark.js