I’m building an app to share notes called Constellational (sign up here!) and one thing I’ve wanted is to support Markdown. Markdown is a way to write text that looks sane, for example:
#This is a headline
That can be converted to the HTML for a headline:
<h1>This is a headline</h1>
No one should have to write that by hand.
I’m using an NPM package called marked to do this conversion. Marked returns an HTML string — which will unfortunately be escaped by React if you include in your JSX.
To work around this we can Dangerously Set InnerHTML. Basically, we’rerelying on Marked to be secure and escape any HTML it finds within the Markdown string that needs to be converted.
Our component now looks like:
import React from 'react';
import marked from 'marked';
class Post extends React.Component {
constructor(props, context) {
super(props, context);
this.rawMarkup = this.rawMarkup.bind(this);
}
rawMarkup() {
let rawMarkup = marked(this.props.data.data, {sanitize: true});
return { __html: rawMarkup };
}
render() {
var post = this.props.data;
return <div className="post">
<span dangerouslySetInnerHTML={this.rawMarkup()} />;
</div>;
}
}
This fixes #14