Zipline Markdown Previewer

index.html

<div id="content">
</div>

script.babel

var MarkdownBox = React.createClass({
  getInitialState: function() {
    return {
      text: 'Hello World!\n======\n2nd heading \n-------\n\n### Subheading'
    };
  },
  changeText: function(e) {
    this.setState({
      text: e.target.value
    });
  },
  render: function() {
    return ( <div>
      <
      textarea value = {
        this.state.text
      }
      onChange = {
        this.changeText
      }
      /> <
      MarkdownPreview data = {
        this.state.text
      }
      /> </div>
    );
  }
});
var MarkdownPreview = React.createClass({
  markup: function() {
    var raw = marked(this.props.data, {
      sanitize: true
    });
    return {
      __html: raw
    };
  },
  render: function() {
    return ( < div className = "markdownPreview" >
      <
      span dangerouslySetInnerHTML = {
        this.markup()
      }
      /></div>
    )
  }
});
//ReactDOM.render(<h1>Hello world!</h1>, document.getElementById('content'));
ReactDOM.render( < MarkdownBox / > , document.getElementById('content'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

style.sass

$maxwidth: 600px
$maxheight: 400px

textarea 
  width: $maxwidth
  height: $maxheight
.markdownPreview
  display: inline-block
  float: right
  width: $maxwidth

zipline-markdown-previewer.markdown

Zipline Markdown Previewer

A Pen by Brian Puschell on CodePen.

License.