Skip to content
React component for syntax highlighting
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit ebad4d4 Apr 12, 2018

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src cleanup babelrc Mar 23, 2018
test Made all tests pass Mar 15, 2018
.babelrc cleanup babelrc Mar 23, 2018
.eslintrc Add the option to pass required element in which code should render Apr 17, 2016
.gitignore Added package-lock to gitignore Mar 13, 2018
.npmignore version update to fix build issue Mar 14, 2018
.travis.yml Added travis ci config Jul 12, 2015
LICENSE Initial commit Dec 8, 2014
README.md Update README.md Apr 12, 2018
index.js Fixed #5. Publishing jsx to js transformed files to npm Jul 12, 2015
package.json new release Mar 23, 2018

README.md

react-highlight

React component for syntax highlighting using highlight.js

Build Status

Latest version

0.11.1

Documentation

CodeSandbox Example

Edit new

Installation

  npm install react-highlight --save

Usage

Importing component

import Highlight from 'react-highlight'

Adding styles

Choose the theme for syntax highlighting and add corresponding styles of highlight.js

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

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

<Highlight innerHTML={true}>
  {"html with multiple code snippets"}
</Highlight>
You can’t perform that action at this time.