diff --git a/README.md b/README.md index c87e1c7..607d066 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ npm install --save react-remarkable var React = require('react'); var Markdown = require('react-remarkable'); +var Emoji = require('remarkable-emoji'); var MyComponent = React.createClass({ @@ -20,7 +21,7 @@ var MyComponent = React.createClass({ return (
{/* Pass Markdown source to the `source` prop */} - + {/* Or pass it as children */} {/* You can nest React components, too */} @@ -47,6 +48,7 @@ Available props: - `options` - Hash of Remarkable options - `source` - Markdown source. You can also pass the source as children, which allows you to mix React components and Markdown. - `container` - Element to use as container. Defaults to `div`. +- `plugins` - Array of remarkable plugins ## Syntax Highlighting diff --git a/src/index.js b/src/index.js index 46c7336..4a128b9 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,7 @@ class Remarkable extends React.Component { componentWillUpdate(nextProps, nextState) { if (nextProps.options !== this.props.options) { - this.md = new Markdown(nextProps.options); + this.md = this.createMarkdown(nextProps.options, nextProps.plugins); } } @@ -39,16 +39,23 @@ class Remarkable extends React.Component { renderMarkdown(source) { if (!this.md) { - this.md = new Markdown(this.props.options); + this.md = this.createMarkdown(this.props.options, this.props.plugins); } return this.md.render(source); } + + createMarkdown(options, plugins) { + return plugins.reduce((md, plugin) => { + return md.use(plugin); + }, new Markdown(options)); + } } Remarkable.defaultProps = { container: 'div', options: {}, + plugins: [], }; export default Remarkable;