# react-highlight

> React component for syntax highlighting

Latest version **0.15.0** (published 2022-11-17) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2022-11-17 |
| First published | 2014-12-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-highlight) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 761 |
| Author | Kiran Abburi |
| Maintainers | akiran |
| Keywords | react, highlight.js, syntax, highlighting, react-component |

## Links

- npm: https://www.npmjs.com/package/react-highlight
- Repository: https://github.com/akiran/react-highlight
- Issues: https://github.com/akiran/react-highlight/issues
- npm.io page: https://npm.io/package/react-highlight

## Dependencies (1)

- [highlight.js](https://npm.io/package/highlight.js.md) ^10.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.15.0 (latest) — 2022-11-17
- 0.14.0 — 2021-02-25
- 0.13.0 — 2021-01-14
- 0.12.0 — 2018-03-23
- 0.11.1 — 2018-03-14
- 0.11.0 — 2018-03-13
- 0.10.0 — 2017-05-04
- 0.9.0 — 2016-09-04
- 0.8.0 — 2016-04-17
- 0.7.0 — 2016-03-02
- 0.6.1 — 2015-11-28
- 0.6.0 — 2015-11-28
- 0.5.1 — 2015-10-10
- 0.5.0 — 2015-07-12
- 0.4.1 — 2015-01-23
- … 4 more at https://npm.io/package/react-highlight/versions

## README

# react-highlight

React component for syntax highlighting using highlight.js

![Build Status](https://travis-ci.org/akiran/react-highlight.svg?branch=master)

### Latest version

`0.11.1`

## [Documentation](https://react-highlight.neostack.com/)

### CodeSandbox Example

[![Edit new](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mj6wlmor9p)

### Installation

```bash
  npm install react-highlight --save
```

### Usage

#### Importing component

```js
import Highlight from 'react-highlight'
```

#### Adding styles

Choose the [theme](https://highlightjs.org/static/demo/) for syntax highlighting and add corresponding styles of highlight.js

```css
  <link rel="stylesheet" href="/path/to/styles/theme-name.css">
```

The styles will most likely be in `node_modules/highlight.js/styles` folder.

Props:

* className: custom class name
* innerHTML: enable to render markup with dangerouslySetInnerHTML
* element: render code snippet inside specified element

#### Syntax highlighting of single code snippet

Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.

```html
<Highlight className='language-name-of-snippet'>
  {"code snippet to be highlighted"}
</Highlight>
```

#### Syntax highlighting of mutiple code snippets

Set `innerHTML=true` to highlight multiple code snippets at a time.
This is especially usefull if html with multiple code snippets is generated from preprocesser tools like markdown.

**Warning:** If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.

```html
<Highlight innerHTML={true}>
  {"html with multiple code snippets"}
</Highlight>
```

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