https://github.com/rexxars/react-lowlight
Syntax highlighter for React, utilizing VDOM for efficient updates
https://github.com/rexxars/react-lowlight
react syntax syntax-highlighting
Last synced: 21 days ago
JSON representation
Syntax highlighter for React, utilizing VDOM for efficient updates
- Host: GitHub
- URL: https://github.com/rexxars/react-lowlight
- Owner: rexxars
- License: mit
- Created: 2016-03-13T12:43:42.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2023-07-04T04:28:10.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T00:01:07.112Z (12 months ago)
- Topics: react, syntax, syntax-highlighting
- Language: JavaScript
- Homepage: http://rexxars.github.io/react-lowlight/
- Size: 1010 KB
- Stars: 103
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lowlight
Syntax highlighter for React, utilizing VDOM for efficient updates
[](https://npmjs.com/package/react-lowlight)
[](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(
,
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(
,
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/[email protected]/styles/):
```html
```
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 `
` tag, sets `display: inline`) |
| `markers` | Array of lines to mark. Can also be specified in `{line: , className: }` 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).