# react-highlight-code

> only one prop to show highlightCode using highlight.js

Latest version **0.0.3** (published 2022-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-highlight-code
pnpm add react-highlight-code
yarn add react-highlight-code
bun add react-highlight-code
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-07-02 |
| First published | 2022-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 6.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | fanyanyan |
| Keywords | highlight, react, component, highlight.js |

## Links

- npm: https://www.npmjs.com/package/react-highlight-code
- Repository: https://github.com/F-one-1/react-highlight-code
- Issues: https://github.com/F-one-1/react-highlight-code/issues
- npm.io page: https://npm.io/package/react-highlight-code

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.0.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.5.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2022-07-02
- 0.0.2 — 2022-06-24
- 0.0.1 — 2022-06-24

## README

## Highlight Code for React

 only one prop to show highlightCode using highlight.js



<p>
  <a href="https://npm-stat.com/charts.html?package=react-highlight-code">
    <img alt="Downloads" src="https://img.shields.io/npm/dm/react-highlight-code.svg">
  </a>
  <a href="https://npmjs.com/package/react-highlight-code">
    <img alt="Version" src="https://img.shields.io/npm/v/react-highlight-code.svg"/>
  </a>
  <a href="http://packagequality.com/#?package=react-highlight-code">
    <img alt="Quality" src="https://npm.packagequality.com/shield/react-highlight-code.svg">
  </a>
</p>


```
yarn add highlight.js react-highlight-code
```

## live demo

[stackblitz highlight demo](https://stackblitz.com/github/F-one-1/react-highlight-code?file=src%2FApp.jsx)



### 1. use in react

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

import the component and style

```js
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](https://user-images.githubusercontent.com/68687740/175461527-acad549a-b44d-4a00-9c3a-3642b0f01fc5.png)

![VY~~5VUAX 5IGNCE)$ZZ43H](https://user-images.githubusercontent.com/68687740/175461537-e482fa19-21dc-43d3-a617-3cab870d5bf9.png)



### 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`                                                 |

---
_Source: https://npm.io/package/react-highlight-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._