* allow remarkable options to be passed down to markdown renderer

* fix indent in README
* use BEM naming

README.md

@@ -18,7 +18,7 @@ http://insidersbyte.github.io/react-markdown-editor
 ## Installing
 
 ```bash
-npm install @insidersbyte/react-markdown-editor
+npm install @insidersbyte/react-markdown-editor --save
 ```
 
 ## Usage
@@ -31,42 +31,42 @@ import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css';
 
 class App extends React.Component {
     constructor() {
-            super();
-
-            this.state = {
-                markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
-            };
-
-            this.updateMarkdown = this.updateMarkdown.bind(this);
-        }
-
-        onImageDrop(file) {
-            // This is where you would upload your files to whatever storage you are using
-            // You just need to return a promise with the original filename and the url of the uploaded file
-
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    resolve({
-                        filename: file.name,
-                        url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
-                    });
-                }, 3000);
-            });
-        }
-
-        updateMarkdown(event) {
-            this.setState({ markdown: event.target.value });
-        }
+        super();
+
+        this.state = {
+            markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
+        };
+
+        this.updateMarkdown = this.updateMarkdown.bind(this);
+    }
+
+    onImageDrop(file) {
+        // This is where you would upload your files to whatever storage you are using
+        // You just need to return a promise with the original filename and the url of the uploaded file
 
-        render() {
-            return (
-                <MarkdownEditor
-                    value={this.state.markdown}
-                    onChange={this.updateMarkdown}
-                    onImageDrop={this.onImageDrop}
-                />
-            );
-        }
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    filename: file.name,
+                    url: 'http://images.freeimages.com/images/previews/b56/hands-2-ok-hand-1241594.jpg',
+                });
+            }, 3000);
+        });
+    }
+
+    updateMarkdown(event) {
+        this.setState({ markdown: event.target.value });
+    }
+
+    render() {
+        return (
+            <MarkdownEditor
+                value={this.state.markdown}
+                onChange={this.updateMarkdown}
+                onImageDrop={this.onImageDrop}
+            />
+        );
+    }
 }
 
 ReactDOM.render(<App />, document.getElementById('app'));
@@ -77,6 +77,7 @@ ReactDOM.render(<App />, document.getElementById('app'));
 * value (*string*) - the raw markdown that will be converted to html (**required**)
 * onChange (*function*) - called when a change is made (**required**)
 * onImageDrop (*function*) - called per image dropped on the textarea
+* options (*object*) - the options for remarkable (see [here](https://github.com/jonschlinkert/remarkable#options)) (default: { })
 
 ## Contributing
 

package.json

@@ -82,7 +82,7 @@
     "rimraf": "^2.5.2",
     "stats-webpack-plugin": "^0.3.1",
     "style-loader": "^0.13.1",
-    "stylus": "^0.54.3",
+    "stylus": "^0.54.4",
     "stylus-loader": "^2.0.0",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"

src/index.js

@@ -11,6 +11,11 @@ export default class MarkdownEditor extends React.Component {
         value: React.PropTypes.string.isRequired,
         onChange: React.PropTypes.func.isRequired,
         onImageDrop: React.PropTypes.func,
+        options: React.PropTypes.object,
+    };
+
+    static defaultProps = {
+        options: {},
     };
 
     state = {
@@ -73,11 +78,15 @@ export default class MarkdownEditor extends React.Component {
     };
 
     render() {
-        const textAreaClassName = this.state.draggingOver ? 'dragover' : null;
+        let textAreaClassName = 'markdown-editor__textarea';
+
+        if (this.state.draggingOver) {
+            textAreaClassName += ' markdown-editor__textarea--dragover';
+        }
 
         return (
             <div className="markdown-editor">
-                <div>
+                <div className="markdown-editor__editor-container">
                     <h2>Markdown</h2>
 
                     <TextArea
@@ -90,12 +99,13 @@ export default class MarkdownEditor extends React.Component {
                     />
                 </div>
 
-                <div>
+                <div className="markdown-editor__preview-container">
                     <h2>Preview</h2>
 
                     <MarkdownRenderer
                         className="markdown-editor__preview"
                         markdown={this.props.value}
+                        options={this.props.options}
                     />
                 </div>
             </div>

src/react-markdown-editor.styl

@@ -5,24 +5,26 @@
     min-height 500px
     margin-bottom 15px
 
-    > *
-        flex 1 1 50%
-        max-width 50%
-        max-height 100%
-        margin 0 5px
-        display flex
-        flex-direction column
+.markdown-editor__editor-container
+.markdown-editor__preview-container
+    flex 1 1 50%
+    max-width 50%
+    max-height 100%
+    margin 0 5px
+    display flex
+    flex-direction column
 
-        > *:last-child
-            flex 1
+.markdown-editor__textarea
+.markdown-editor__preview
+    flex 1
 
-    .markdown-editor__preview
-        img
-            max-width 100%
+.markdown-editor__textarea--dragover
+    border 1px solid #c9ff00
+    box-shadow 0 0 10px #719ECE
 
-        :last-child
-            margin-bottom: 0;
+.markdown-editor__preview
+    img
+        max-width 100%
 
-    .dragover
-        border 1px solid #c9ff00
-        box-shadow 0 0 10px #719ECE
+    :last-child
+        margin-bottom 0