Handling Markdown in React

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 it in your JSX.

To work around this we can Dangerously Set InnerHTML. Basically, we’re relying 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()} />;

This fixes #14

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.