react-remarkable

A React component for rendering Markdown with remarkable.

npm install --save react-remarkable

Usage

 
var React = require('react');
var Markdown = require('react-remarkable');
 
var MyComponent = React.createClass({
 
  render() {
    return (
      <div>
        {/* Pass Markdown source to the `source` prop */}
        <Markdown source="**Markdown is awesome!**" />
 
        {/* Or pass it as children */}
        {/* You can nest React components, too */}
        <Markdown>{`
          ## Reasons React is great
 
          1. Server-side rendering
          2. This totally works:
 
          <SomeOtherAmazingComponent />
 
          Pretty neat!
        `}</Markdown>
      </div>
    );
  }
 
});
 

Available props:

• options - Hash of Remarkable options
• source - Markdown source. You can also pass the source as children, which allows you to mix React components and Markdown.
• container - Element to use as container. Defaults to div.

Syntax Highlighting

Atom

You can enable syntax highlighting in Atom using the following steps:

Go to Settings > Packages > language-babel Settings > Enter this for JavaScript Tagged Literal Grammar Extensions:

"(?<=<Markdown>{)":source.gfm

Shortly you'll see that markdown syntax highlighting is enabled.

License

MIT