code-colors-react
TypeScript icon, indicating that this package has built-in type declarations

3.2.1 • Public • Published

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/prism-themes@1.9.0/themes/${theme}.min.css`;

loadCss(url);

Package Sidebar

Install

npm i code-colors-react

Weekly Downloads

64

Version

3.2.1

License

Apache-2.0

Unpacked Size

30.1 kB

Total Files

15

Last publish

Collaborators

  • streamich