diff --git a/README.md b/README.md
index 8ba7b75..5073f8f 100644
--- a/README.md
+++ b/README.md
@@ -12,11 +12,12 @@ npm install --save react-remarkable
```jsx
import React from 'react';
import Markdown from 'react-remarkable';
+import Emoji from 'remarkable-emoji'
const MyComponent = () => (
{/* Pass Markdown source to the `source` prop */}
-
+
{/* Or pass it as children */}
{/* You can nest React components, too */}
@@ -39,6 +40,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 44efa45..c15f7a3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -47,7 +47,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);
}
}
@@ -71,17 +71,24 @@ 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',
contentWrapper: 'span',
options: {},
+ plugins: [],
};
export default Remarkable;