Sugar High

Super lightweight syntax highlighter for JavaScript and JSX—about 1 kB minified and gzipped. Works in the browser or any JS runtime that can set HTML strings.

Install

npm install sugar-high

Usage

import { highlight } from 'sugar-high'

const codeHTML = highlight(code)

document.querySelector('pre > code').innerHTML = codeHTML

Language presets

The core highlighter targets JavaScript and JSX. For CSS, Rust, Python, and similar, import a preset from sugar-high/presets and pass it into highlight:

import { highlight } from 'sugar-high'
import { rust } from 'sugar-high/presets'

const html = highlight(source, { ...rust })

Available presets: c, css, diff, go, java, python, and rust.

For more language presets and syntax color themes, see sugar-high.vercel.app.

Styling

Each line is wrapped in sh__line. Set CSS custom properties --sh-* on an ancestor (for example :root) to pick colors—inspect the output or the example below for the variable names you need.

Example theme:

:root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-property: #0550ae;
  --sh-entity: #249a97;
  --sh-jsxliterals: #6266d1;
  --sh-string: #00a99a;
  --sh-keyword: #f47067;
  --sh-comment: #a19595;
}

Line numbers

Use a ::before counter on .sh__line for gutter numbers:

pre code {
  counter-reset: sh-line-number;
}

.sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  margin-right: 24px;
  text-align: right;
  color: #a4a4a4;
}

Highlighting a line

Target a line with .sh__line:nth-child(<n>) (1-based):

.sh__line {
  display: block;
  padding: 0 12px;
  margin: 0 -12px;
  min-height: 1rem;
}

.sh__line:nth-child(5) {
  background: #fff8c5;
}

.sh__line--highlighted {
  background: #fff8c5;
}

Use .sh__line--highlighted when you add highlight classes yourself (for example with lineClassName).

Remark

Use the remark plugin to highlight fenced code blocks when processing Markdown with remark. Details: packages/remark-sugar-high.

License

MIT