React markdown and core

react
1

I’m looking for a lightweight solution to add Github flavored markdown capability to the comments section of my project which is all react. I know that markdown is included in meteor core but the docs only show a short blaze example. Is it possible to use core markdown with React (preferably without wrapping the blaze component in react)?

3

I ended up just using meteorhacks:npm and cosmos:browserify to import marked. It works OK. Here is a simple react component:

MarkdownElement = React.createClass({
  mixins: [React.addons.PureRenderMixin],
    
    propTypes: {
    text: React.PropTypes.string.isRequired
  },

  render() {
    const { text } = this.props;

    return (
      <div
        className="markdown-body"
        dangerouslySetInnerHTML={{__html: marked(text)}}
      />
    );
  }
});
4

Whenever I’ve needed Markdown input I’ve always used themeteorchef:commonmark.

It’s really easy to implement whatever you’re using (react, blaze, whatever) so I recommend it. Even if you already came up with your own solution above!

5

@korus90 Thanks, I missed that one. I found a good speed test on jsperf for testing different markdowns. The results between Marked and CommonMark varied greatly. On my Android phone marked was twice as fast. On my desktop using firefox, Marked was 33% faster. Using Chrome CommonMark was 4% faster. However, Remarkable was substantially faster than both on all my tests. I did not find a Remarkable package on Atmosphere. Also one of the slowest was Showdown which is used in the official Meteor package.

1 Like
6

That’s interesting. I always thought it parsed markdown pretty quickly. I’ve only used CommonMark to parse a form input into the database (reddit-style) rather than any real-time parsing and it’s been fine.

However, if Remarkable is so fast maybe someone who has more time than me should make a meteor package :wink: