Skip to content

Instantly share code, notes, and snippets.

@Oluwasetemi
Created February 7, 2018 20:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Oluwasetemi/64580e255a2c1fd6b4cac76ec69f907c to your computer and use it in GitHub Desktop.
Save Oluwasetemi/64580e255a2c1fd6b4cac76ec69f907c to your computer and use it in GitHub Desktop.
A MarkdownComponent
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Type some *markdown* here!' };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
const md = new Remarkable();
return { __html: md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<textarea
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
ReactDOM.render(<MarkdownEditor />, mountNode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment