React-highlight-code NPM

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>

BC ~P}8(~@476~S4DTVM99V

VY~~5VUAX 5IGNCE)$ZZ43H

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-height`String`	`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`

highlight react component highlight.js

highlight.js react react-dom

@infinitebrahmanuniverse/nolb-react-hi @everything-registry/sub-chunk-2559

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago