Highlight Code for React

only one prop to show highlightCode using highlight.js

yarn add highlight.js react-highlight-code

live demo

stackblitz highlight demo

1. use in react

Install the react-highlight-code and highlight.js:

import the component and style

import { HighCode } from 'react-highlight-code'
import 'react-highlight-code/dist/style.css'
const value = 'only one prop to show highlightCode using highlight.js'
<HighCode codeValue={value}></HighCode>

Component Props

prop	description	type	default
codeValue	Highlight Code Source	String	''
lang	Highlight Code Type	String	javascript (such as 'javascript','vue','html','css')
theme	Component Highlight Code theme	String	default: dark(only ['dark','light'])
codeLines	Show Code lines	Boolean	false
langName	Highlight Code Name (Upper left corner display)	String	``
width	component style width	String	620px
height	component style height	String	``
maxWidth	component style max-width	String	``
maxHight	component style max-heightString	String	200px
fontSize	highlight code font-size	Number	-
scrollStyleBool	component scroll bar style	Boolean	true
copy	whether the code can copy and show	Boolean	true