react-remarkable

1.1.3 • Public • Published

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

Package Sidebar

Install

npm i react-remarkable

Weekly Downloads

5,168

Version

1.1.3

License

MIT

Last publish

Collaborators

  • mxstbr
  • acdlite