# react-remarkable

> A React component for rendering Markdown with remarkable

Latest version **1.1.3** (published 2017-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-remarkable
pnpm add react-remarkable
yarn add react-remarkable
bun add react-remarkable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2017-10-13 |
| First published | 2014-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 457 |
| Author | Andrew Clark |
| Maintainers | mxstbr, acdlite |
| Keywords | react, remarkable, markdown, commonmark |

## Links

- npm: https://www.npmjs.com/package/react-remarkable
- Repository: https://github.com/acdlite/react-remarkable
- Homepage: https://github.com/acdlite/react-remarkable#readme
- Issues: https://github.com/acdlite/react-remarkable/issues
- npm.io page: https://npm.io/package/react-remarkable

## Dependencies (1)

- [remarkable](https://npm.io/package/remarkable.md) ^1.x

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.3 (latest) — 2017-10-13
- 1.1.2 — 2017-09-26
- 1.1.1 — 2015-04-30
- 1.1.0 — 2014-12-01
- 1.0.0 — 2014-11-26

## README

react-remarkable
=================

A React component for rendering Markdown with [remarkable](https://github.com/jonschlinkert/remarkable).

```
npm install --save react-remarkable
```

## Usage

```jsx

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`

<img width="527" alt="screen shot 2017-05-28 at 9 04 27 am" src="https://cloud.githubusercontent.com/assets/108938/26529400/fe7ea216-4384-11e7-9eab-3259eb684648.png">

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

<img width="449" alt="screen shot 2017-05-28 at 9 06 31 am" src="https://cloud.githubusercontent.com/assets/108938/26529401/fe7faf4e-4384-11e7-8977-f1fe39537524.png">

## License
MIT

---
_Source: https://npm.io/package/react-remarkable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._