This easiest way to try out react-highlight is using the Code Sandbox example
npm install react-highlight --save
yarn add react-highlight
const Highlight = require('react-highlight')
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
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>
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>