https://github.com/streamich/code-colors-react
Code syntax highlighting React component
https://github.com/streamich/code-colors-react
code color component highlight pre react syntax
Last synced: 8 months ago
JSON representation
Code syntax highlighting React component
- Host: GitHub
- URL: https://github.com/streamich/code-colors-react
- Owner: streamich
- License: apache-2.0
- Created: 2023-07-02T11:10:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-12T04:22:43.000Z (9 months ago)
- Last Synced: 2025-05-12T05:27:52.776Z (9 months ago)
- Topics: code, color, component, highlight, pre, react, syntax
- Language: TypeScript
- Homepage: https://streamich.github.io/code-colors-react/
- Size: 10.2 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# code-colors-react
React component for code syntax highlighting. [__Preview 📕__][storybook]
[storybook]: https://streamich.github.io/code-colors-react/?path=/story/stories-colortokens--hello-world
**Why another code syntax highlighting package?**
- A simple to use React component.
- It is very lightweight, only ships a small React component, which loads
tokenization script (~35Kb) in a Web Worker on demand, on first usage.
- The Prism.js tokenization script is loaded from the CDN asynchronously.
- Runs tokenization in a Web Worker, so it doesn't block the main thread.
- Emits Prism.js compatible HTML, so you can use any Prism.js [themes](https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/).
- No layout shifts before the code is highlighted. While the code is being
highlighted in the Web Worker, the component renders plain text with the
correct dimensions.
- If code changes while it is being highlighted, the component will cancel the
previous highlighting and start a new one.
- Interactive CSS on mouse hover.
## Installation
```sh
npm install code-colors-react
```
## Usage
```js
import { ColorTokens } from "code-colors-react";
;
```
#### Props
- `code` — The code to highlight.
- `lang` — The language of the code. If omitted, it will try to autodetect the language.
- `as` — The root element to render. Defaults to `"code"`.
## Styling
To style the highlighted code, you can use any of the [pre-defined themes](https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/) from
Prism.
You can do it in JavaScript like so:
```js
import { loadCss } from "thingies/lib/loadCss";
const theme = "github";
const url = `https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/${theme}.min.css`;
loadCss(url);
```
## Examples
Basic JavaScript:
Negative values with red background:
Nested languages: JavaScript and CSS inside HTML:
[See more examples][storybook].