A React component for rendering Markdown with remarkable
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9c82dd9 Oct 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Rewrite getDefaultProps to defaultProps May 5, 2017
.gitignore Initial commit Nov 26, 2014
.jshintrc Initial commit Nov 26, 2014
.npmignore Initial commit Nov 26, 2014
README.md Merge pull request #22 from Venryx/patch-1 Sep 26, 2017
package.json Bump to 1.x Oct 13, 2017
yarn.lock Bump to 1.x Oct 13, 2017

README.md

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

screen shot 2017-05-28 at 9 04 27 am

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

screen shot 2017-05-28 at 9 06 31 am

License

MIT