0.0.3 • Published 2 years ago
react-highlight-code v0.0.3
Highlight Code for React
only one prop to show highlightCode using highlight.js
yarn add highlight.js react-highlight-code
live 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 |