only one prop to show highlightCode using highlight.js
yarn add highlight.js react-highlight-code
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>
| 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 |