Markdown Preview

In this example below you will see how to do a Markdown Preview with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©
  • HTML
  • CSS
  • JavaScript
    <div class ="container" id ="container"></div>

/*Downloaded from https://www.codeseek.co/captnstarburst/markdown-preview-dOEQjL */
    $bgColor : #FFFF99;
$font : 'Oxygen', sans-serif;


body{
   background-color : $bgColor;
   font-family: $font;
}

 .container{
   margin-top: 3%;
  // +border: black solid 1px;
 }



/*Downloaded from https://www.codeseek.co/captnstarburst/markdown-preview-dOEQjL */
    class App extends React.Component{
  
  constructor(props){
    super(props);
    this.state = {
      markdown : "# GitHub Markdown Preview"
    };
  }
  
  handleChange(event){
    this.setState({markdown : event.target.value});
  }
  
  render(){
    return(
      <div className ="row">
        <div className ="col-xs-6">
          <textarea rows ="40" cols="40" value = {this.state.markdown} onChange ={() => this.handleChange(event)} />
        </div>
        <div className ="col-xs-6">
          <div dangerouslySetInnerHTML ={{__html: marked(this.state.markdown)}} ></div>  
        </div>  
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#container'));

Comments