Markdown Previewer - React

Markdown Previewer.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id='app'>
</div>
 

markdown-previewer-react.markdown

Markdown Previewer - React

A Pen by Vasilii V on CodePen.

License.

script.babel

marked.setOptions({
  gfm: true,
  breaks: true
});

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { input: '' };
  }
  myChangeHandler = (event) => {
    this.setState({input: event.target.value});
  }
  
  render() {
    return (
      <div>
        <p>Input your text here:</p>
        <textarea id="editor" defaultValue=' > Quote&#13; # Header &#13;## Header 2 &#13;[link to Google!](http://google.com) <br>`<code></code>`&#13;```&#13;if(a)&#13;{return b}&#13;```&#13; <br> **Bold text** <br> ![Blinchik](https://i.kym-cdn.com/photos/images/newsfeed/000/210/908/1322791906001.jpg) &#13; * Item 1
* Item 2&#13;  ' onChange={this.myChangeHandler}  >  
       
        
          
        </textarea>
        
        <p> The result is here: </p>
      <div id="preview" dangerouslySetInnerHTML={{ __html: marked(this.state.input)}} />
       
      
      
      
        </div>
    );
  }
}


React.render(<MyForm />, document.getElementById('app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.0/marked.min.js"></script>

style.css

body {padding: 0 50vh 0 50vh}
textarea { width: 50vw; height: 25vh }