MarkDown Previewer

Markdown Previewer

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


</div>

markdown-previewer.markdown

MarkDown Previewer

A Pen by Olusola Omosola on CodePen.

License.

script.babel

class MDown extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      input:""
    }
 this.handleChange=this.handleChange.bind(this);
  }
  
  componentDidMount(){
   
  }
  
 handleChange=(event)=>{
   let input = event.target.value;
   
   this.setState({input});
 }
  render(){
    return (
    <div class="row">
      <div className="col" id="j">
        <textarea className="form-control" rows="5" onChange={this.handleChange} id="editor">{this.state.input}
        
        </textarea>
        </div>
      <div className="col" >
        
        <MakeInnerHtml data={this.state.input}/>
        </div>  
      </div>
    )
  }
}
let createMarkup=(data)=>{
  
  return {__html: marked(data,{gfm:true,breaks:true})};
}

let MakeInnerHtml = ({data})=>{
  return(
  <div dangerouslySetInnerHTML=      {createMarkup(data)} id="preview"/>
  
  )
}

let container = document.querySelector('#content');
ReactDOM.render(<MDown />,container);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.6.2/marked.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.less

#content{
  padding: 10px
}

#preview{
  border: 1px solid grey;
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(0,0,0,.1);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />