# remark-react-lowlight

> Syntax highlighting for remark-react through lowlight

Latest version **0.7.0** (published 2017-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-react-lowlight
pnpm add remark-react-lowlight
yarn add remark-react-lowlight
bun add remark-react-lowlight
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2017-10-02 |
| First published | 2016-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Juho Vepsalainen |
| Maintainers | inlinestyle, rkaneko, bebraw |
| Keywords | remark, react, lowlight |

## Links

- npm: https://www.npmjs.com/package/remark-react-lowlight
- Repository: https://github.com/bebraw/remark-react-lowlight
- Issues: https://github.com/bebraw/remark-react-lowlight/issues
- npm.io page: https://npm.io/package/remark-react-lowlight

## Dependencies (1)

- [react-lowlight](https://npm.io/package/react-lowlight.md) ^1.0.4

## Recent versions

- 0.7.0 (latest) — 2017-10-02
- 0.6.0 — 2017-08-21
- 0.4.1 — 2017-04-03
- 0.4.0 — 2017-04-03
- 0.3.0 — 2016-11-21
- 0.2.0 — 2016-10-20
- 0.1.0 — 2016-04-08

## README

[![build status](https://secure.travis-ci.org/bebraw/remark-react-lowlight.svg)](http://travis-ci.org/bebraw/remark-react-lowlight) [![bitHound Score](https://www.bithound.io/github/bebraw/remark-react-lowlight/badges/score.svg)](https://www.bithound.io/github/bebraw/remark-react-lowlight) [![Dependency Status](https://david-dm.org/bebraw/remark-react-lowlight.svg)](https://david-dm.org/bebraw/remark-react-lowlight)

# `remark-react-lowlight`
## Syntax highlighting for [`remark-react`](https://github.com/mapbox/remark-react) through [`lowlight`](https://github.com/wooorm/lowlight)

**Usage:**

```javascript
...

import remark from 'remark';
import reactRenderer from 'remark-react';
import RemarkLowlight from 'remark-react-lowlight';

import js from 'highlight.js/lib/languages/javascript';

import githubSchema from 'hast-util-sanitize/lib/github.json';

const schema = Object.assign({}, githubSchema, {
  attributes: Object.assign({}, githubSchema.attributes, {
    code: [
      ...(githubSchema.attributes.code || []),
      'className'
    ]
  })
});

...
{remark().use(reactRenderer, {
  sanitize: schema,
  remarkReactComponents: {
    code: RemarkLowlight({
      js
    })
  }
}).processSync(readme).contents}
...
```

Notes
- The default santization schema (GitHub's) excludes `className`, but we want those `hljs-*` classes for our highlighting! Hence the custom object passed to `santization`.
- You'll need stylings for the classes that [Highlight.js](https://github.com/isagalaev/highlight.js) adds. You can choose from a bunch bunch of pre-made [stylesheets](https://github.com/isagalaev/highlight.js/tree/master/src/styles).

## Contributors
* [Juho Vepsäläinen](https://github.com/bebraw) - Creator and former owner of this project.
* [Ryota](https://github.com/rkaneko) - Fixed `props` for the lowlight component.
* [Henrik Lundgren](https://github.com/henriklundgren) - Fixed option property test, allowed skipping inline code tags.
* [Shingo Sato](https://github.com/sugarshin) - Patch duplicate pre tag.

## License

MIT.

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