# Sugar High

> Use Sugar High to add lightweight syntax highlighting to JavaScript, React, or Remark projects. Use when highlighting source code or configuring Sugar High languages, classes, or token hooks.

- Skill: `huozhi/sugar-high` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add huozhi/sugar-high`
- Raw SKILL.md: https://api.skillmd.com/api/skills/huozhi/sugar-high/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: huozhi (https://skillmd.com/u/huozhi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/huozhi/sugar-high

---


# Sugar High

Use `sugar-high` for a small, DOM-free HTML highlighter. It highlights JavaScript (including JSX) by default and returns an HTML string.

```ts
import { highlight } from 'sugar-high'

const html = highlight('const ready = true')
```

Pass a canonical built-in language name when it is known:

```ts
highlight('print("hi")', { lang: 'python' })
highlight('{"ready": true}', { lang: 'json' })
```

For language labels from filenames or Markdown fences, normalize them first with `lang()`:

```ts
import { lang } from 'sugar-high/lang'

const language = lang('tsx') // 'typescript'
```

Do not call `lang()` when the caller already has a canonical name. The highlighter accepts:
`javascript`, `typescript`, `css`, `python`, `c`, `go`, `java`, `rust`, `json`, `diff`, `shell`,
`cpp`, `csharp`, `sql`, `html`, `yaml`, `markdown`, `plaintext`, `ruby`, `kotlin`, `swift`,
`php`, `toml`, `powershell`, `dockerfile`, `graphql`, and `hcl`.

## Choose the entry point

- Use `sugar-high` for the standard, one-step highlighter with all built-in languages.
- Use `sugar-high/gpu` for experimental asynchronous, language-agnostic WebGPU highlighting.
- Use `@sugar-high/react` for React `<Code>` blocks, the textarea-overlay `<Editor>`, or a
  navigable `<FileTree>`.
- Use `@sugar-high/react/gpu` for opt-in client-side GPU `Code` and `Editor` components.
- Use `@sugar-high/remark` to highlight fenced Markdown code blocks.
- Use `sugar-high/core` only when the caller needs to compose parsing and rendering or selectively
  imports language configurations for bundle size.

`sugar-high/core` does not include the built-in registry. Import individual configurations from
`sugar-high/lang/<language>` and pass them to `parse()` when using it.

For React components, props, server compatibility, and styling hooks, read
[the React API reference](references/react.md). For Remark plugin configuration, fence metadata,
and generated markup, read [the Remark API reference](references/remark.md).

## Experimental WebGPU highlighting

Install `gpu-lexer` alongside Sugar High when using the opt-in GPU entry:

```sh
npm install sugar-high gpu-lexer
```

Both GPU APIs are asynchronous:

```ts
import { highlight, parse } from 'sugar-high/gpu'

const parsed = await parse(source)
const html = await highlight(source)
```

Use this entry for language-agnostic highlighting when the browser has WebGPU. It rejects when
WebGPU is unavailable, and the model infers syntax without a `lang` option. Importing the standard
`sugar-high` entry does not load the GPU model. For client-side React components, import `Code` or
`Editor` from `@sugar-high/react/gpu` and install `gpu-lexer` separately.

## Customize display

Use `cx` to add classes by token category. Use `mark(token)` for conditional classes, inline
styles, or attributes; it runs after `cx` and may mutate the token. Use `markLine(line)` for
line-level customization; its index is zero-based.

Preserve Sugar High's semantic classes (`sh__line` and the token classes) unless the caller
explicitly wants to replace their styling. Avoid adding an abstraction or custom grammar when the
existing language configuration and display hooks express the need.

Read the [API reference](https://github.com/huozhi/sugar-high/blob/main/docs/API.md) for export
details, token shapes, and the complete language-alias mapping.