JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 175
  • Score
    100M100P100Q72369F
  • License Apache-2.0

Code syntax highlighting for the web

Package Exports

  • code-colors
  • code-colors/lib/CodeColors
  • code-colors/lib/CodeColors.js
  • code-colors/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) 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

Code syntax highlighting for the web. Uses Prism for parsing.

Why I created this library? I needed a simple React component that highlights code, but there was none which satisfied the following requirements:

  • Dynamically loads highligting parsers.
  • Executs highlighting in a web worker.
  • While code is parsed in the worker, renders raw un-highlighted source without any flickering.
  • A simple to use React component.

Installation

npm install code-colors

Usage

Simply call the tokenizeAsync function with the code and language you want to highlight.

import {tokenizeAsync} from 'code-colors';

const code = `console.log('Hello, World!');`;
const language = 'javascript';

const tokens = await tokenizeAsync(code, language);
console.log(tokens);

It will automatically download popular Prism languages from the CDN.