Cacher is the code snippet organizer for pro developers

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

.container 
  margin-top: 15px
textarea
  resize: vertical
  height: 100%

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

var DisplayContainer = React.createClass({
    updateValue:function(modifiedValue){
        this.setState({
            value: modifiedValue
        })
    },
    getInitialState:function(){
        return{
            value:'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[HARUN PEHLİVAN](https://freecodecamp.com/harunpehlivan)*'
        }
    },
    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("container"));

<div class="container" id="container">
</div>