React Markdown

index.html

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

react-markdown.markdown

React Markdown

A Pen by Razafindrakoto on CodePen.

License.

script.babel

var DisplayContainer = React.createClass({
    updateValue:function(modifiedValue){
        this.setState({
            value: modifiedValue
        })
    },
    getInitialState:function(){
        return{
            value:'Hello world!'
        }
    },
    rawMarkup: function(value) {
      var rawMarkup = marked(value, {sanitize: true});
      return { __html: rawMarkup };
    },
    render:function(){
        return (
          <div className="row">
            <div className="col-md-6">
              <RawInput value={this.state.value} updateValue={this.updateValue}/>
            </div>
            <div className="col-md-6">
              <span dangerouslySetInnerHTML={this.rawMarkup(this.state.value)} />
            </div>
          </div>
        );
    }
});
 
var RawInput = React.createClass({
    update:function(){
        var modifiedValue=this.refs.inputValue.getDOMNode().value;
        this.props.updateValue(modifiedValue);
    },
    render:function(){
        return (<textarea rows="22" type="text" ref="inputValue" value={this.props.value} onChange={this.update} className="form-control" />)
    }
});
 
React.render(<DisplayContainer />,document.getElementById("content"));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.sass

#content
  margin: 50px
textarea
  resize: vertical
  height: 100%

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />