Package Exports

code-colors-react
code-colors-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (code-colors-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

code-colors-react

React component for code syntax highlighting.

Why another code syntax highlighting package?

This package is simple to use. It is very lightweight, it essentially just ships a single React component.
The highlight.js dependency is loaded from CDN asynchronously.
highlight.js is run in a Web Worker, so it doesn't block the main thread.
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.

Installation

npm i 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.
prefix — The prefix to use for the CSS classes. Defaults to hljs-.
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 highlight.js.

You can do it in JavaScript like so:

import {loadCss} from 'thingies/lib/loadCss';

const theme = 'github';
loadCss(`https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/${theme}.min.css`, 'hljs');