code-colors-react
v3.2.1
Published
Code syntax highlighting React component
Downloads
164
Maintainers
Readme
code-colors-react
React component for code syntax highlighting.
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.
- 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.
Installation
npm install code-colors-react
Usage
import { ColorTokens } from "code-colors-react";
<pre>
<ColorTokens code={"console.log('hello world');"} lang={"js"} />
</pre>;
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 from Prism.
You can do it in JavaScript like so:
import { loadCss } from "thingies/lib/loadCss";
const theme = "github";
const url = `https://cdn.jsdelivr.net/npm/[email protected]/themes/${theme}.min.css`;
loadCss(url);