Need help with react-remarkable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

acdlite
441 Stars 59 Forks 18 Commits 22 Opened issues

Description

A React component for rendering Markdown with remarkable

Services available

!
?

Need anything else?

Contributors list

# 40
JavaScr...
HTML
React
Shell
5 commits
# 15,526
React N...
TypeScr...
Heroku
Ember
2 commits
# 203
JavaScr...
GraphQL
Redux
offline...
1 commit
# 9,310
JavaScr...
node
Git
commiti...
1 commit
# 38,243
TypeScr...
node
raven
sentry
1 commit
# 16,069
preset
applesc...
React
ecmascr...
1 commit
# 72,911
TypeScr...
HTML
mobx-st...
React
1 commit
# 125,139
React
Webpack
faceboo...
GraphQL
1 commit

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 (

{/* Pass Markdown source to the source prop */}

    {/* 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></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:

"(?<={)":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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.