SHARE
TWEET

Untitled

a guest Oct 22nd, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class MarkdownEditor extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.handleChange = this.handleChange.bind(this);
  5.     this.state = { value: 'Hello, **world**!' };
  6.   }
  7.  
  8.   handleChange(e) {
  9.     this.setState({ value: e.target.value });
  10.   }
  11.  
  12.   getRawMarkup() {
  13.     const md = new Remarkable();
  14.     return { __html: md.render(this.state.value) };
  15.   }
  16.  
  17.   render() {
  18.     return (
  19.       <div className="MarkdownEditor">
  20.         <h3>Input</h3>
  21.         <label htmlFor="markdown-content">
  22.           Enter some markdown
  23.         </label>
  24.         <textarea
  25.           id="markdown-content"
  26.           onChange={this.handleChange}
  27.           defaultValue={this.state.value}
  28.         />
  29.         <h3>Output</h3>
  30.         <div
  31.           className="content"
  32.           dangerouslySetInnerHTML={this.getRawMarkup()}
  33.         />
  34.       </div>
  35.     );
  36.   }
  37. }
  38.  
  39. ReactDOM.render(
  40.   <MarkdownEditor />,
  41.   document.getElementById('markdown-example')
  42. );
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top