React Component for syntax highlighting

Quick start

This easiest way to try out react-highlight is using the  Code Sandbox example


npm install react-highlight --save
yarn add react-highlight


Importing Component

const Highlight = require('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">

Styles will be in node_modules/highlight.js/styles folder


  • 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"}

Syntax Highlighting of multiple 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"}
© Neostack