# react-lowlight

> Super-thin React wrapper for lowlight (Syntax highlighting using VDOM)

Latest version **3.1.1** (published 2026-07-25) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2026-07-25 |
| First published | 2016-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 113 |
| Author | Espen Hovlandsdal |
| Maintainers | rexxars |
| Keywords | react, highlight, syntax, lowlight, vdom |

## Links

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

## Dependencies (1)

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

## 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

- 3.1.1 (latest) — 2026-07-25
- 3.0.0-alpha.0 (alpha) — 2021-11-27
- 3.1.0 — 2025-01-13
- 3.0.2 — 2025-01-10
- 3.0.1 — 2024-12-06
- 3.0.0 — 2021-11-27
- 2.0.0 — 2018-02-14
- 1.1.1 — 2017-06-28
- 1.1.0 — 2017-06-28
- 1.0.6 — 2017-04-20
- 1.0.5 — 2017-04-17
- 1.0.4 — 2017-03-05
- 1.0.3 — 2017-03-05
- 1.0.2 — 2016-07-09
- 1.0.1 — 2016-07-09
- … 2 more at https://npm.io/package/react-lowlight/versions

## README

# react-lowlight

Syntax highlighter for React, utilizing VDOM for efficient updates

[![npm version](https://badgen.net/npm/v/react-lowlight?style=flat-square)](https://npmjs.com/package/react-lowlight)
[![Tests](https://github.com/rexxars/react-lowlight/actions/workflows/tests.yml/badge.svg)](https://github.com/rexxars/react-lowlight/actions/workflows/tests.yml)

- Thin wrapper on top of [lowlight](https://github.com/wooorm/lowlight) (Syntax highlighting using VDOM)
- Lowlight uses [highlight.js](https://github.com/isagalaev/highlight.js) under the hood, thus supports all the same syntaxes
- About ~18KB (6.5KB gziped) when using a single language syntax. Each language tends to pack on another ~2KB uncompressed.

Feel free to check out a [super-simple demo](http://rexxars.github.io/react-lowlight/).

## Installation

This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm](https://docs.npmjs.com/cli/install):

```bash
$ npm install react-lowlight highlight.js
```

You'll also need to provide the [highlight.js](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) language definitions you want to use. We don't bundle these in order to not bloat the component with unused definitions.

## Usage

```js
import Lowlight from 'react-lowlight'

// Load any languages you want to use
// (see https://github.com/highlightjs/highlight.js/tree/main/src/languages)
import javascript from 'highlight.js/lib/languages/javascript'

// Then register them with lowlight
Lowlight.registerLanguage('js', javascript)

ReactDOM.render(
  <Lowlight language="js" value="/* Code to highlight */" />,
  document.getElementById('target')
)
```

Note that the `language` property is optional, but significantly increases the speed and reliability of rendering.

If you want to load multiple languages at once

```js
import Lowlight from 'react-lowlight'

import 'react-lowlight/common'
// import 'react-lowlight/all' // <- to import all languages

ReactDOM.render(
  <Lowlight language="js" value="/* Code to highlight */" />,
  document.getElementById('target')
)
```

Imports `react-lowlight/common` and `react-lowlight/all` are re-exports from lowlight. See here https://github.com/wooorm/lowlight#syntaxes for more details

## Styling

Stylesheets are **not** automatically handled for you - but there is [a bunch of premade styles](https://github.com/highlightjs/highlight.js/tree/main/src/styles) for highlight.js which you can simply drop in and they'll "just work". You can either grab these from the source, or pull them in using a CSS loader - whatever works best for you. They're also available on [unpkg](https://unpkg.com/browse/highlight.js@11.3.1/styles/):

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/browse/highlight.js@11.3.1/styles/default.css"
/>
```

If you have a bundler that supports CSS imports, you can do something like the following:

```js
import 'highlight.js/styles/default.css'
```

Note that when using the `markers` feature, there is an additional class name called `hljs-marker` which is not defined by highlight js as it's not a part of its feature set. You can either set it yourself, or you can explicitly set class names on markers.

## Props

| Name        | Description                                                                               |
| :---------- | :---------------------------------------------------------------------------------------- |
| `className` | Class name for the outermost `pre` tag. Default: `lowlight`                               |
| `language`  | Language to use for syntax highlighting this value. Must be registered prior to usage.    |
| `value`     | The code snippet to syntax highlight                                                      |
| `prefix`    | Class name prefix for individual node. Default: `hljs-`                                   |
| `subset`    | Array of languages to limit the auto-detection to.                                        |
| `inline`    | Whether code should be displayed inline (no `<pre>` tag, sets `display: inline`)          |
| `markers`   | Array of lines to mark. Can also be specified in `{line: <num>, className: <class>}` form |

## Dynamic loading

You can use `Lowlight.hasLanguage(language)` to check if a language has been registered. Combining this with Webpack's [code splitting abilities](https://webpack.js.org/guides/code-splitting/) (or something similar), you should be able to load definitions for languages on the fly.

## License

MIT-licensed. See [LICENSE](./LICENSE).

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