https://github.com/zlargon/react-highlight
React component for syntax highlighting.
https://github.com/zlargon/react-highlight
highlight highlightjs react syntax-highlighting
Last synced: about 1 month ago
JSON representation
React component for syntax highlighting.
- Host: GitHub
- URL: https://github.com/zlargon/react-highlight
- Owner: zlargon
- License: mit
- Created: 2016-04-27T13:29:32.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-10T05:02:36.000Z (over 8 years ago)
- Last Synced: 2025-08-27T10:58:31.202Z (7 months ago)
- Topics: highlight, highlightjs, react, syntax-highlighting
- Language: HTML
- Homepage: https://www.npmjs.com/package/react-syntax-highlight
- Size: 41 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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
```
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');
```
## 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