# rc-highlight > React component for highlighting js, ts, jsx and tsx code Latest version **2.5.6** (published 2023-02-26) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-highlight pnpm add rc-highlight yarn add rc-highlight bun add rc-highlight ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.5.6 | | Published | 2023-02-26 | | First published | 2021-12-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 158.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 27 | | Author | JinSSJ3 | | Maintainers | jin_ssj3 | | Keywords | highlight, highlight.js, react, syntax, typescript, copy, clipboard, front-end | ## Links - npm: https://www.npmjs.com/package/rc-highlight - Repository: https://github.com/JinSSJ3/rc-highlight - Homepage: https://github.com/JinSSJ3/rc-highlight#readme - Issues: https://github.com/JinSSJ3/rc-highlight/issues - npm.io page: https://npm.io/package/rc-highlight ## Alternatives - [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads - [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads - [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads - [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads - [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads ## Recent versions - 2.5.6 (latest) — 2023-02-26 - 2.5.4 — 2023-02-25 - 2.5.2 — 2023-02-25 - 2.5.0 — 2023-02-25 - 2.4.8 — 2023-02-25 - 2.4.6 — 2023-02-25 - 2.4.4 — 2023-02-24 - 2.4.2 — 2023-02-24 - 2.4.0 — 2023-02-24 - 2.3.8 — 2023-02-24 - 2.3.7 — 2023-02-24 - 2.3.6 — 2023-02-07 - 2.3.4 — 2023-02-02 - 2.3.2 — 2023-02-02 - 2.2.8 — 2023-02-02 - … 9 more at https://npm.io/package/rc-highlight/versions ## README

✨🖍️ React Highlight ✨🖍️

React component for highlighting js and jsx code with copy to clipboard functionallity. [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE) [![npm latest package](https://img.shields.io/npm/v/rc-highlight.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/rc-highlight) [![install size](https://packagephobia.com/badge?p=@unlimited-react-components/react-highlight)](https://packagephobia.com/result?p=@unlimited-react-components/react-highlight) [![Build Status](https://travis-ci.org/jinssj3/rc-highlight.svg?branch=master)](https://travis-ci.org/jinssj3/rc-highlight) [![Known Vulnerabilities](https://snyk.io/test/github/jinssj3/rc-highlight/badge.svg)](https://snyk.io/test/github/jinssj3/rc-highlight) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/JinSSJ3/rc-highlight.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/JinSSJ3/rc-highlight/context:javascript) [![Total alerts](https://img.shields.io/lgtm/alerts/g/JinSSJ3/rc-highlight.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/JinSSJ3/rc-highlight/alerts/) ## Sample result:

Sample result image

## Installation react-highlight is available as an [npm package](https://www.npmjs.com/package/@unlimited-react-components/react-highlight). ```sh // with npm npm i rc-highlight // or yran yarn add rc-highlight ``` ## Usage Here is a quick example to get you started, **it's all you need**: [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/admiring-mendeleev-xgmzs?file=/package.json) ```jsx import "./styles.css"; import { Highligther } from "rc-highlight"; const App = (props) => { return {makeCode}; }; export default App; const makeCode = ` // this is a sample code const themes = { light: { ... }, dark: { ... } }; const ThemeContext = React.createContext(themes.light); function App() { return ( ); } function Toolbar(props) { ... } const ThemedButton =() => { ... } `; ``` ## Props | Name | Description | Default | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- | | `code` | The JSX code to be highlighted. | "" | | `style` | The in-line CSS object. Only affects the container | { } | | `children` | The JSX code to be highlighted in string format. | "" | | `onCopyToClipboard` | A Funtion that is triggered when copy to clipboard button is clicked. Returns the copied code as a string as first parameter. | undefined | | `copyToClipBoard` | If `true`, a button to copy the code to clipboard will be visible | true | ## License This project is licensed under the terms of the [MIT license](/LICENSE). --- _Source: https://npm.io/package/rc-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._