react-syntax-highlight

react-highlight

React component for syntax highlighting

Change Log

Please see CHANGELOG.

Installation

$ 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

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

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

see all the highlight theme here

React Part

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