# react-syntax-highlight

> React component for syntax highlighting

Latest version **15.3.1** (published 2017-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-syntax-highlight
pnpm add react-syntax-highlight
yarn add react-syntax-highlight
bun add react-syntax-highlight
```

## 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 | 15.3.1 |
| Published | 2017-07-10 |
| First published | 2016-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 10 |
| Author | zlargon |
| Maintainers | zlargon |
| Keywords | react, reactjs, syntax, highlight, highlight.js, highlighting |

## Links

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

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.12.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 15.3.1 (latest) — 2017-07-10
- 15.3.1-alpha — 2017-07-10
- 15.3.0 — 2017-07-08
- 0.0.6 — 2017-03-30
- 0.0.5 — 2016-12-11
- 0.0.4 — 2016-12-11
- 0.0.3 — 2016-12-11
- 0.0.2 — 2016-04-29
- 0.0.1 — 2016-04-28
- 0.0.0-alpha — 2016-04-28

## README

# react-highlight

[![][npm-img]][npm-url]

[![][dependency-img]][dependency-url]

> React component for syntax highlighting

## Change Log

Please see [CHANGELOG](https://github.com/zlargon/react-highlight/blob/master/CHANGELOG.md).

## Installation

```bash
$ npm install --save react react-dom          # peer dependencies
$ npm install --save react-syntax-highlight
```

## Compatibility: React 15.3.0+

This package is compatible with __React 15.3.0__ and higher. (https://github.com/facebook/prop-types#compatibility)

`npm install --save react@^15.3.0 react-dom@^15.3.0`

## Usage

### Highlight Theme

include a highlight.js theme in your HTML file

```html
<link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/default.css'/>
<link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/xxxx.css'/>
```

or if you're using `webpack`, you can require themes like is:

```js
require('highlight.js/styles/default.css');
require('highlight.js/styles/xxxx.css');
```

see all the highlight theme [here](https://github.com/isagalaev/highlight.js/tree/master/src/styles)

### React Part

```jsx
const Highlight = require('react-syntax-highlight');

<Highlight lang={language} value={content} />
```

## Example

- https://github.com/zlargon/react-highlight-example
- http://jsbin.com/bibaqu/edit?js,output (JS Bin)

## License

MIT

[npm-url]: https://nodei.co/npm/react-syntax-highlight
[npm-img]: https://nodei.co/npm/react-syntax-highlight.png

[dependency-url]: https://david-dm.org/zlargon/react-highlight
[dependency-img]: https://img.shields.io/david/zlargon/react-highlight.svg

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