React component for code syntax highlighting. Preview 📕
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.
- Interactive CSS on mouse hover.
npm install code-colors-react
import { ColorTokens } from "code-colors-react"; <pre> <ColorTokens code={"console.log('hello world');"} lang={"js"} /> </pre>;
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".
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);
Basic JavaScript:
Negative values with red background:
Nested languages: JavaScript and CSS inside HTML:
