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 |